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',
    },
});