swiper---點擊按鈕切換或聯動切換

在做前端頁面的時候,經常會遇到需要通過一些按鈕來切換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');
        }
    }
});

打完收工!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章