雙swiper相互控制問題

    //導航swiper

    var mySwiperNav = new Swiper('#nav-swiper', {

        observer: true, //修改swiper自己或子元素時，自動初始化swiper

        observeParents: true, //修改swiper的父元素時，自動初始化swiper

        slidesPerView: 4,

        watchSlidesVisibility: true, //防止不可點擊

        centeredSlidesBounds: true,

        speed: 300,

        onClick: function (e) {

            //點擊導航之后，設置導航相應的樣式

            $(e.clickedSlide).parent().children().removeClass("swiper-slide-active");

            $(e.clickedSlide).addClass("swiper-slide-active");

            mySwiperList.slideTo(e.clickedIndex);

        }

    })

    //列表swiper

    var mySwiperList = new Swiper('#list-swiper', {

        observer: true, //修改swiper自己或子元素時，自動初始化swiper

        observeParents: true, //修改swiper的父元素時，自動初始化swiper

        effect: "coverflow",

        

        onTransitionEnd: function(e){

            let index = e.activeIndex;

            mySwiperNav.slideTo(index);

            $("#nav-swiper .swiper-wrapper>div").removeClass("swiper-slide-active");

            $("#nav-swiper .swiper-wrapper>div").eq(index).addClass("swiper-slide-active");

            

        }

    })

    //導航swiper與列表swiper關聯

    mySwiperNav.on("transitionEnd",function(e){

        mySwiperList.slideTo(e.activeIndex);

    })