Как листать слайдер при клике на первый/последний видимый слайд?

Есть слайдер с тамбами https://codepen.io/IIIu6ko/pen/jOqRMG

var thimbs = new Swiper('.slider__thumbs', {
  slidesPerView: 5,
  spaceBetween: 19,
  direction: "vertical"
});

var main = new Swiper('.slider__main', {
  slidesPerView: 1,
  spaceBetween: 0,
  thumbs: {
    swiper: thimbs
  },
});

Необходимо при кликах на первый/последний видимый тамб прокручивать на один слайд в нужную сторону. Например, при клике на 5ый тамб показывать 6ой. Подходящей настройки в API я не нашёл. Возможно плохо искал.

Причём если слайдер прокручен и кликнуть на 2,3,4 слайд, то он станет последним - Странное поведение, если кто знает как эту хрень отключить, то подскажите.


Ответы (1 шт):

Автор решения: IIIu6ko

Оказывается есть настройка autoScrollOffset. Но есть баг. Если тамбы объявлены отдельно, как было у меня в примере, то эта настройка не работает. Объявил тамбы внутри главного слайдера и всё заработало.

var main = new Swiper('.slider__main', {
  slidesPerView: 1,
  spaceBetween: 0,
  thumbs: {
    autoScrollOffset: 1,
    swiper: {
      el: '.slider__thumbs',
      slidesPerView: 5,
      spaceBetween: 19,
      direction: "vertical"
    }
  },
});
→ Ссылка