你好,我正在使用拇指滑块。画廊顶部的滑块均具有导航功能。还有一个图库缩略图滑块导航。我无法同步运行它们。因为当我在gallery-thumb滑块中添加导航时,swiper-button-next和swiper-button-prev类将被禁用。我该如何解决这个问题
->> HTML CODE
<div class="swiper-container news-detail-slider gallery-top" >
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="javascript:;">
<picture>
<!--[if IE 9]><video style="display: none"><![endif]-->
<source srcset="temp/753x510.jpg" media="(min-width: 768px)">
<!--[if IE 9]></video><![endif]-->
<img src="temp/.jpg" data-loadmode="0" alt=""><!-- mobile -->
</picture>
</a>
</div>
<div class="swiper-slide">
<a href="javascript:;">
<picture>
<!--[if IE 9]><video style="display: none"><![endif]-->
<source srcset="temp/753x510.jpg" media="(min-width: 768px)">
<!--[if IE 9]></video><![endif]-->
<img src="temp/.jpg" data-loadmode="0" alt=""><!-- mobile -->
</picture>
</a>
</div>
<div class="swiper-slide">
<a href="javascript:;">
<picture>
<!--[if IE 9]><video style="display: none"><![endif]-->
<source srcset="temp/753x510.jpg" media="(min-width: 768px)">
<!--[if IE 9]></video><![endif]-->
<img src="temp/.jpg" data-loadmode="0" alt=""><!-- mobile -->
</picture>
</a>
</div>
<div class="swiper-slide">
<a href="javascript:;">
<picture>
<!--[if IE 9]><video style="display: none"><![endif]-->
<source srcset="temp/753x510.jpg" media="(min-width: 768px)">
<!--[if IE 9]></video><![endif]-->
<img src="temp/.jpg" data-loadmode="0" alt=""><!-- mobile -->
</picture>
</a>
</div>
<div class="swiper-slide">
<a href="javascript:;">
<picture>
<!--[if IE 9]><video style="display: none"><![endif]-->
<source srcset="temp/753x510.jpg" media="(min-width: 768px)">
<!--[if IE 9]></video><![endif]-->
<img src="temp/.jpg" data-loadmode="0" alt=""><!-- mobile -->
</picture>
</a>
</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<div class="swiper-container gallery-thumbs">
<div class="swiper-wrapper">
<div class="swiper-slide"><span>1</span></div>
<div class="swiper-slide"><span>2</span></div>
<div class="swiper-slide"><span>3</span></div>
<div class="swiper-slide"><span>4</span></div>
<div class="swiper-slide"><span>5</span></div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
JS代码->
var galleryThumbs = new Swiper('.gallery-thumbs', {
spaceBetween: 10,
slidesPerView: 5,
freeMode: true,
watchSlidesVisibility: true,
watchSlidesProgress: true,
navigation: {
nextEl: '.gallery-thumbs .swiper-button-next',
prevEl: '.gallery-thumbs .swiper-button-prev',
},
});
var galleryTop = new Swiper('.news-detail-slider', {
slidesPerView: 1,
navigation: {
nextEl: '.news-detail-slider .swiper-button-next',
prevEl: '.news-detail-slider .swiper-button-prev',
},
autoplay:{
delay: 4000,
disableOnInteraction: !1
},
effect: "flipEffect",
slidesOffsetBefore: 0,
speed: 800,
flipEffect: {
rotate: 0,
stretch: -10,
depth: 100,
modifier: 3,
slideShadows: !1
},
spaceBetween: 0,
thumbs: {
swiper: galleryThumbs
}
});
刚刚弄清楚了。
您需要将.swiper-container添加到所有新的Swiper类中,>
var galleryThumbs = new Swiper('.swiper-container.gallery-thumbs', {
var galleryTop = new Swiper('.swiper-container.news-detail-slider', {
然后神奇地滑动知道页面上有多个。
还请确保您的标记的结构与演示类似
<!-- Swiper --> <div class="swiper-container swiper-one"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 2</div> </div> <!-- Add Arrows --> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div>
请参阅swiper-wrapper在容器内部,但导航元素在包装器外部