最近做了一個前端項目，其中用到了 Swiper 插件，對于我一個后臺來說這個項目簡直是一種煎熬，遇到了很多問題，在這里和大家分享下。

　　

　　　　 // swiper輪播上邊this.galleryTop = new Swiper('.gallery-top', {spaceBetween: 0, // 在slide之間設置距離（單位px）。noSwiping: true, // 設為true時，可以在slide上（或其他元素）增加類名'swiper-no-swiping'，使該slide無法拖動observer: true,//修改swiper自己或子元素時，自動初始化swiperobserveParents: true,//修改swiper的父元素時，自動初始化swiperon: {touchStart: function (event) { // touchStart 當碰觸到slider時執行 activeIndex 返回當前索引值if (this.activeIndex == 1) {that.galleryTop.allowSlidePrev = false // 控制是否可以切換到上一個} else {that.galleryTop.allowSlidePrev = true // 控制是否可以切換到上一個}},slideChange: function () { // slideChange 當前Slide切換時執行(activeIndex發生改變)}}})

上面為Swiper初始化，其中的黃色標注就是坑所在

問題描述：

　　比如說現在滑動的卡片有4個，如代碼所示，如果當前活動的下標為1，也就是第二個卡片，則將其設置為禁止向左滑動，也就是 “that.galleryTop.allowSlidePrev = false”，這樣卡片就不能向左滑動，但是可以向右滑動，不過這個時候你如果使用 “galleryTop.slideTo(0)”（解釋：作用是控制卡片跳轉到指定下標的卡片），就會出現問題，如果你設置了第二個卡片禁止向左滑動，你用“galleryTop.slideTo(0)”指定跳轉到第一個卡片就會不起作用，但是可以指定該卡片右邊的卡片，也就是“galleryTop.slideTo(2)”，總結來說，你只要設置了向左禁止滑動，所有的向左的指定卡片跳轉“galleryTop.slideTo(0)”都不起作用；

原因：

　　

　　如圖所示只要你設置了該屬性，向左滑動禁用，并且按鈕組件失效，也就是說你只要設置了該屬性，它就會一直處于向左禁用的狀態

解決方法：

　　在你使用 “galleryTop.slideTo(0)” 之前加上 “galleryTop.allowSlidePrev = true” 先解除禁用，在進行跳轉就可以了。

轉載于:https://www.cnblogs.com/Singulariity-gs/p/11155792.html

總結

以上是生活随笔為你收集整理的Swiper使用心得的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。