html代码
<!-- 主要轮播 -->
<div id="product-image-slides" class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="item in swiper">
<img :src="item">
</div>
</div>
</div>
<!-- 导航轮播 -->
<div id="product-image-nav" class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="item in swiper">
<img :src="item">
</div>
</div>
<!-- 自定义翻页器-->
<div class="swiper-prev"></div>
<div class="swiper-next"></div>
</div>
js代码
var imgSlide = new Swiper("#product-image-slides", {
loop: false,
centeredSlides: true,
autoplay: {
delay: 3000,
disableOnInteraction: false
},
slidesPerView: 1,
spaceBetween: 10,
navigation: {
nextEl: '#product-image-nav .swiper-next',
prevEl: '#product-image-nav .swiper-prev',
}
});
var galleryThumbs = new Swiper('#product-image-nav', {
spaceBetween: 10,
slidesPerView: 5,
touchRatio: 0.2,
loop: false,
});
imgSlide.controller.control = galleryThumbs;
// 点击缩略图 控制切换对应大图
var objThumbs = $("#product-image-nav .swiper-wrapper .swiper-slide");
var objTop = $("#product-image-slides .swiper-wrapper .swiper-slide");
objThumbs.click(function(e) {
var currentId = $(this).attr("data-image-index");
for(var i = 0; i < objTop.length; i++) {
if($(objTop[i]).attr("data-image-index") === currentId) {
e.preventDefault();
imgSlide.slideTo(i, 1000, false);
}
}
})
},
注:代码是在vue框架下写的 不会vue的同学看一下结构也能明白
在vue框架下 这个swiper的js代码写在mounted内