Swiper.js 控制两个具有不同选项循环的实例

Question

我尝试用这样的 拇指制作滑块，
但我希望我的滑块是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;

但一切都不起作用。我的滑块和拇指不执行相同的操作。怎么办呢 谢谢。

Answer 1

执行此操作的一种方法是删除幻灯片的关联并使用滑动事件手动滑动它们

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 个控制器关联。

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);
});

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;
}