我试着用拇指做一个滑块，如下所示
但我希望我的滑块是loop=true，而我的拇指是loop=false。这是我设置的
var galleryTop = new Swiper('.gallery-top', {
spaceBetween: 10,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
loop: true
});
var galleryThumbs = new Swiper('.gallery-thumbs', {
spaceBetween: 10,
centeredSlides: true,
slidesPerView: 'auto',
touchRatio: 0.2,
slideToClickedSlide: true
});
galleryTop.controller.control = galleryThumbs;
galleryThumbs.controller.control = galleryTop;
但一切都不起作用。我的滑块和拇指做的项目不一样。如何做到这一点，谢谢。
一种方法是删除幻灯片的关联，并使用滑动器事件手动滑动它们
galleryTop.on('slideChangeTransitionEnd', function() {
let index_currentSlide = galleryTop.realIndex;
let currentSlide = galleryTop.slides[index_currentSlide]
galleryThumbs.slideTo(index_currentSlide, 1000, false);
});
galleryThumbs.on('slideChangeTransitionEnd', function() {
let index_currentSlide = galleryThumbs.realIndex;
let currentSlide = galleryThumbs.slides[index_currentSlide]
galleryTop.slideTo(index_currentSlide, 1000, false);
});
下面是一个工作示例，我添加了上面的代码并删除了2个控制器关联。
var galleryTop = new Swiper('.gallery-top', {
spaceBetween: 10,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
loopedSlides: 5,
loop: true
});
var galleryThumbs = new Swiper('.gallery-thumbs', {
spaceBetween: 10,
centeredSlides: true,
slidesPerView: 'auto',
slideToClickedSlide: true,
loopedSlides: 5
});
galleryTop.on('slideChangeTransitionEnd', function() {
let index_currentSlide = galleryTop.realIndex;
let currentSlide = galleryTop.slides[index_currentSlide]
galleryThumbs.slideTo(index_currentSlide, 1000, false);
});
galleryThumbs.on('slideChangeTransitionEnd', function() {
let index_currentSlide = galleryThumbs.realIndex;
let currentSlide = galleryThumbs.slides[index_currentSlide]
galleryTop.slideTo(index_currentSlide, 1000, false);
});body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
height: 300px;
}
.swiper-container {
width: 100%;
height: 300px;
margin: 20px auto;
}
.swiper-slide-container {
text-align: center;
font-size: 18px;
background: #fff;
height: 100%;
max-width: 600px;
margin: auto;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.gallery-top {
height: 80%;
width: 100%;
}
.gallery-thumbs {
height: 20%;
box-sizing: border-box;
padding: 10px 0;
}
.gallery-thumbs .swiper-slide {
width: 20%;
height: 100%;
opacity: 0.4;
}
.gallery-thumbs .swiper-slide-active {
opacity: 1;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js" integrity="sha512-WNLxfP/8cVYL9sj8Jnp6et0BkubLP31jhTG9vhL/F5uEZmg5wEzKoXp1kJslzPQWwPT1eyMiSxlKCgzHLOTOTQ==" crossorigin="anonymous"></script>
<script src="https://unpkg.com/swiper@6.0.4/swiper-bundle.js"></script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/swiper@6.0.4/swiper-bundle.css" />
<body>
<div class="swiper-container gallery-top">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="swiper-slide-container">Slide 1</div>
</div>
<div class="swiper-slide">
<div class="swiper-slide-container">Slide 2</div>
</div>
<div class="swiper-slide">
<div class="swiper-slide-container">Slide 3</div>
</div>
<div class="swiper-slide">
<div class="swiper-slide-container">Slide 4</div>
</div>
<div class="swiper-slide">
<div class="swiper-slide-container">Slide 5</div>
</div>
</div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<div class="swiper-container gallery-thumbs">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="swiper-slide-container">Slide 1</div>
</div>
<div class="swiper-slide">
<div class="swiper-slide-container">Slide 2</div>
</div>
<div class="swiper-slide">
<div class="swiper-slide-container">Slide 3</div>
</div>
<div class="swiper-slide">
<div class="swiper-slide-container">Slide 4</div>
</div>
<div class="swiper-slide">
<div class="swiper-slide-container">Slide 5</div>
</div>
</div>
</div>
</body>