在做前端頁面的時候,經常會遇到需要通過一些按鈕來切換swiper的情況,或者是兩個swiper進行聯動切換:
第一種:點擊按鈕切換swiper以及滑動swiper切換按鈕
var swiper = new Swiper('.swiper',{ loop: false, on:{ transitionEnd: function(swiper){ $(".swiper-tab .tab-item").eq(swiper.activeIndex).addClass('active').siblings('.tab-item').removeClass('active'); } } }); $(".swiper-tab .tab-item").click(function(){ $(this).addClass('active').siblings('.tab-item').removeClass('active'); development.slideTo($(this).index(), 1000, false); });
第二種:兩個swiper聯動切換
var sceneCateSwiper = new Swiper(".main-scene-cate-swiper", { slidesPerView: 'auto', on: { click: function(swiper){ sceneSwiper.slideTo(swiper.clickedIndex,1000,false); } } }); var sceneSwiper = new Swiper(".main-scene-swiper", { on: { transitionEnd: function(swiper){ $(".main-scene-cate-swiper .swiper-wrapper .swiper-slide").eq(swiper.activeIndex).addClass('active').siblings('.swiper-slide').removeClass('active'); } } });
打完收工!