swiper常見問題

swiper是一個比較不錯的一個輪播外掛，但是呢，有時候在使用的時候也會出現很多的問題，我將我遇到的一些問題解決辦法寫在下面。

第一個問題：swiper分頁器不顯示

一般swiper使用分頁器都是這樣的

var mySwiper = new Swiper(`.swiper-container`,{
pagination: {
    el: `.swiper-pagination`,
  },
})

如果你的分頁器在使用了 pagination 後還沒有顯示出來，那麼你可以替換一下swiper的js和css試一下，我就是這麼做的。

第二個問題：swiper不斷的切換

一般swiper切換是這樣的

var mySwiper = new Swiper(`.swiper-container`, {
  autoplay:true,//等同於以下設定
});

如果你寫成了這樣

var mySwiper = new Swiper(`.swiper-container`, {
  /*autoplay: {
    delay: 3000,
    stopOnLastSlide: false,
    disableOnInteraction: true,
    },*/
});

有可能你的輪播就會不斷切換，所以要寫成上面那樣，然後輪播時間這些可以這樣寫

var mySwiper = new Swiper(`.swiper-container`, {
　autoplay:true,
  autoplay: {
    delay: 1000,//1秒切換一次
  },
});

暫時就這些了，以後遇到其他問題我還會繼續補充上來的。

一般我們使用swiper做輪播基本都是固定的引數，現在我把這些引數寫下來

var mySwiper = new Swiper(`.swiper-container`, {
  autoplay:true,//是否自動切換
  autoplay: {
    delay: 1000,//1秒切換一次
    disableOnInteraction:false，//使用者操作後是否繼續切換，預設true:停止
    reverseDirection:false,//開啟反向切換，預設false
  },
  pagination: {
    el: `.swiper-pagination`,//開啟分頁器
    type: `bullets`,//分頁器樣式
    bulletElement : `li`,//指定分頁器標籤
    hideOnClick :true,//顯示/隱藏分頁器:預設顯示false，true隱藏
    clickable :true,//點選切換分頁器
  },
   navigation: {//前進後退按鈕
      nextEl: `.swiper-button-next`,
      prevEl: `.swiper-button-prev`,
    },
});

swiper常見問題

相關文章