//导航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);
})
