Swiper.js control two instances with different option loop

Question

I try to make a slider with thumb like this
But i want my slider is loop=true and my thumb is loop=false. Here is my setting

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;

But everything not working. my slider and my thumb not do the same item. How to do that thank.

user_9942418 · Answer

One way of doing this is to remove the slide's association and slide them manually using swiper events

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

Here's a working example below where I added the code above and removed the 2 controller associations.

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

Swiper.js control two instances with different option loop

1 Answers