Infinite loop swiper with custom pagination

Question

I'm trying to make an infinite loop slider with custom pagination. It's working when the slide is not that long. When the slide is longer than the viewport when you click on "Go to 2" for example the swiper move the first slide to the left of the screen and then you have to wait for the second slide to show.

How I can make the pagination to swipe from the beginning of the right slide that corresponds to?

I'm using custom pagination because when you click it, it must scroll you faster to the slide you want. The basic speed of the swiper needs to be slow so that you can read the slides.

var galleryThumbs = new Swiper('.gallery-thumbs', {
  spaceBetween: 0,
  slidesPerView: 1,
  observer: true,
  simulateTouch: true,
  slideToClickedSlide: true,
  watchSlidesVisibility: true,
  disableOnInteraction: false,
  watchSlidesProgress: true,
  loopPreventsSlide: false,
  initialSlide: 1,
});

var galleryTop = new Swiper('.gallery-top', {
  spaceBetween: 0,
  loop: true,
  speed: 35000,
  freeMode: true,
  slideToClickedSlide: true,
  centeredSlides: false,
  slidesPerView: 'auto',
  initialSlide: -1,
  observer: true,
  loopPreventsSlide: false,
  autoplay: {
    delay: 0,
    disableOnInteraction: false,
    loopPreventsSlide: false,
  },
  disableOnInteraction: false,
  thumbs: {
    swiper: galleryThumbs
  }
});

$(".thumb-holder").click(function() {
  var tabData = $(this).attr('data-index');
  tabData = tabData - 1;
  galleryTop.slideToLoop(tabData, 400);
  galleryTop.update();
});

.thumb-holder {
  display: inline-block;
}

.gallery-top .swiper-slide {
  height: 50px;
  display: inline-block;
  width: auto !important;
}

.gallery-top .swiper-wrapper {
  -webkit-transition-timing-function: linear!important;
  -o-transition-timing-function: linear!important;
  transition-timing-function: linear!important;
  -moz-osx-transition-timing-function: linear!important;
}

.gallery-thumbs .swiper-slide {
  display: inline-block;
  width: auto !important;
  padding: 0 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css" />
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<div class="swiper-container gallery-top">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="swiper-inner" style="width: 1200px; background: #7f7fff;">1</div>
    </div>
    <div class="swiper-slide">
      <div class="swiper-inner" style="width: 400px; background: #f35747;">2</div>
    </div>
    <div class="swiper-slide">
      <div class="swiper-inner" style="width: 100px; background: #91605b;">3</div>
    </div>
    <div class="swiper-slide">
      <div class="swiper-inner" style="width: 1200px; background: #c8bebd;">4</div>
    </div>
  </div>
</div>
<div class="swiper-container gallery-thumbs">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="thumb-holder" data-index="0">Go to 1</div>
    </div>
    <div class="swiper-slide">
      <div class="thumb-holder" data-index="1">Go to 2</div>
    </div>
    <div class="swiper-slide">
      <div class="thumb-holder" data-index="2">Go to 3</div>
    </div>
    <div class="swiper-slide">
      <div class="thumb-holder" data-index="3">Go to 4</div>
    </div>
  </div>
</div>

Here is the example: https://jsfiddle.net/0y3owdtj/1/

Infinite loop swiper with custom pagination

0 Answers0