---
type: slide
---

# swiper套件
###### tags:`HyUI4.0`

---

HyUI 4.0 改使用 swiper 作為輪播的套件
目前使用的版本為 8.4.4

swiper功能也是蠻豐富的，可以自訂的內容也不少
且有中文的API使用參考網站

英文版網站：[https://swiperjs.com/](https://swiperjs.com/)
中文版網站：[https://www.swiper.com.cn/](https://www.swiper.com.cn/)
(中文的api有些是舊的，使用上要注意)
詳細解釋每一個參數：[https://developer.aliyun.com/article/272546](https://developer.aliyun.com/article/272546)
(版本較早，但可以參考)

---

swiper 相較 slick 使用上會稍微複雜一些，且部分class是無法變更名稱的

html結構

<!-- swiper 區塊 -->
<div class="swiper">
  <!-- 輪播內容區塊class不可變更 -->
  <div class="swiper-wrapper">
    <!-- 輪播項目class不可變更 -->
    <div class="swiper-slide" data-title="內容 1">內容 1</div>
    <div class="swiper-slide" data-title="內容 2">內容 2</div>
    <div class="swiper-slide" data-title="內容 3">內容 3</div>
    ...
  </div>
  <!-- 若需要切換點，需自行增加此div -->
  <div class="swiper-pagination"></div>

  <!-- 若需要左右切換，需自行增加此div -->
  <button class="swiper-button-prev"></button>
  <button class="swiper-button-next"></button>

  <!-- 若需要卷軸，需自行增加此div -->
  <div class="swiper-scrollbar"></div>
</div>

---

js語法

let mpSliderItem = document.querySelectorAll('.mpSlider .swiper-slide');
let mpSliderPagination = [];
mpSliderItem.forEach((item, index) => {
  mpSliderPagination.push(item.dataset.title);
});
const swiper = new Swiper('.swiper', {
  slidesPerView: 1, //顯示筆數
  spaceBetween: 20, //每筆之間的距離
  navigation: {
    nextEl: '.bannerSlider .nextSlider', //下一筆class，無障礙設定關係需要增加.nextSlider
    prevEl: '.bannerSlider .prevSlider', //前一筆class，無障礙設定關係需要增加.prevSlider
    disabledClass: 'swiperArrow-disabled', //不可點選樣式
  },
  pagination: {
    //顯示圓點
    el: '.swiperDots', //圓點 class
    type: 'bullets', //樣式參考 https://www.swiper.com.cn/api/pagination/299.html
    clickable: true, //設定後圓點才可以點擊
    renderBullet: function (index, className) {
  return `<button class="${className} noFonts" aria-label="${mpSliderPagination[index]}">${mpSliderPagination[index]}</button>`;
    },
  },
  autoplay: {
    //自動播放
    delay: 5000, //自動播放的間隔
  },
  loop: true, //無限輪播
  effect: 'fade', //淡入
  fadeEffect: {
    crossFade: true, //上一筆淡出，false上一筆不淡出，下一筆疊在上方
  },
});

---

pagination圓點切換無障礙相關
如果有需要使用圓點且要有無礙的話

1.html .swiper-slide 增加 data-title="文字"
2.加入以下程式碼，要寫在swiper前面

// 變數每個swiper都要不一樣
//mpSliderItem 指定該swiper元件中的 .swiper-slide
let mpSliderItem = document.querySelectorAll('.mpSlider .swiper-slide');
let mpSliderPagination = [];
mpSliderItem.forEach((item, index) => {
  mpSliderPagination.push(item.dataset.title);
});

3.swiper的js內 pagination 增加，變數要對應上面設定的變數

renderBullet: function (index, className) {
  return `<button class="${className} noFonts" aria-label="${mpSliderPagination[index]}">${mpSliderPagination[index]}</button>`;
}

---

左右切換鍵無障礙相關
swiper其實有地方可以設定文字，不同語系要個別設定，所以另外寫語系功能
在main.js最下方有設定箭頭文字的功能

swiperArrows({
  next: '.nextSlider',
  prev: '.prevSlider',
  data: [
    //增加語系請寫在這邊
    {
      lang: 'zh',
      nextText: '下一筆',
      prevText: '上一筆',
    },
    //...由此新增其他語系
  ],
    //預設語系
  default: {
    nextText: 'next',
    prevText: 'previous',
  },
});

<style>
.reveal h1{
font-size:2em;
}
.reveal h1,.reveal h2 {
color:#c9f2ff;
}
.reveal{
font-size:26px;
}
</style>