---
tags: Swiper
---
# Swiper 參數設定
(雖然以後可能用不到)

## 初始化<font color="#f66">先指定顯示</font>第幾張slide
2代表第三張

initialSlide :2,

<br/>

## 客制<font color="#f66">滾動條</font>

scrollbar: {
    el: '.swiper-scrollbar',
    dragSize: 30, //自訂滾動條長度
},

<br/>

## 指定<font color="#f66">滾動到第幾張</font>slide

mySwiper.slideTo(index, speed, runCallbacks)

mySwiper.slideTo(0, 1000, false);//切换到第一个slide，速度为1秒

mySwiper.slideToLoop(0, 1000, false);  //可輪播slide

https://www.swiper.com.cn/api/methods/109.html
<br/>

## 縮圖

var thumbsSwiper = new Swiper('#thumbs',{
  spaceBetween: 10,
  slidesPerView: 4,
  watchSlidesVisibility: true,//防止不可点击
})
var gallerySwiper = new Swiper('#gallery',{
  spaceBetween: 10,
  thumbs: {
    swiper: thumbsSwiper,
  }
})

<br/>

## <font color="#f66">分頁</font>樣式

pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
    //type: 'fraction',
    //type : 'progressbar',
    //type : 'custom',
  },

<br/>

### 自訂分頁樣式

pagination: {
        el: '.swiper-pagination',
        clickable: true,
        renderBullet: function (index, className) {
          return '<span class="' + className + '">' + (index + 1) + '</span>';
        },
},

https://stackblitz.com/edit/swiper-demo-7-custom-pagination?file=index.html
https://codepen.io/ncer/pen/xpqemZ
https://react-id-swiper.ashernguyen.site/example/custom-pagination
<br/>

## <font color="#f66">新增輪播</font>指定樣式
<br/>

## 圖片<font color="#f66">延遲載入</font>超過10張
請將 loop移除或 img data-src 改為 img src
<br/>

## <font color="#f66">直式輪播</font>設定高度
當 .swiper-wrapper 設定 顯示1則訊息高度時，
**.swiper-slide** 也請設定同樣高度或是更小高度，
若有2則訊息需要箭頭滾動，可設定 slidesPerView: 1,

或是第二種方式：
將整個 swiper 設定高度，swiper-slide 維持自動取高度，可維持以下狀態 或不加入css

.index-news-slider {
    height: 高度px;
    overflow: hidden;
}

.index-news-slider .swiper-slide {
    height: auto;
    height: initial;
}