Swiper - 2 Column thumbs slide, active slide not always in view

Question

When I click next on the main "hero" swiper slider multiple times (10). The thumbs in view get out of sync and the active thumb is no longer in view.

I am trying to link two swiper sliders together inside a bootstrap modal. The thumbs slider is a vertical two column slider and linked to the main "hero" slider inside the modal.

Scroll down the page and click "view 23 photos" to open the modal. https://transmission.mecum.tv/2019/06/18/milk-money/

const $id = $(this).attr('id');

modalThumbs = new Swiper('#' + $id + ' .gallery-modal-thumbs .swiper-container', {
  direction: 'vertical',
  observer: true,
  observeParents: true,
  spaceBetween: 20,
  slidesPerColumn: 2,
  slidesPerView: 5,
  navigation: {
    nextEl: '#' + $id + ' .modal-thumb-next button',
    prevEl: '#' + $id + ' .modal-thumb-prev button',
  },
});

modalHero = new Swiper('#' + $id + ' .gallery-modal-hero .swiper-container', {
  loop: true,
  observer: true,
  observeParents: true,
  simulateTouch: false,
  spaceBetween: 0,
  speed: 500,
  navigation: {
    nextEl: '#' + $id + ' .modal-hero-next button',
    prevEl: '#' + $id + ' .modal-hero-prev button',
  },
  pagination: {
    el: '#' + $id + ' .swiper-pagination',
    type: 'fraction',
  },
  thumbs: {
    swiper: gallerySliders[$id].modalThumbs,
  },
});

The active thumbnail slide should always be in view.

OT: I wanted to take a look but couldn't find the mentioned link anywhere. This is a screenshot of the page in FF, images won't scale properly. Only saw two warnings and no errors in the browser console so it's most likely not due to blocked or missing scripts. — SaschaM78
Looks like I had a flexbox issue there. Should be ok on firefox now. — jonny-harte

SaschaM78 SaschaM78 · Accepted Answer · 2019-06-25T12:57:53

It seems automatic height calculation along with two-column layout might be problematic. Right now on moving to the next slide the script uses .translate3d() on the Y-axis with the heights of one image to scroll the thumbs. If you would manually set the heights via Parameters setting to the half heights of the image (which would be 52 Pixels rather than 104 Pixels) the currently shown element should not move out of view. Initialization would be similar to this:

var thumbsSwiper = new Swiper('.swiper-container-thumbs', {
  slidesPerView: 10,
  height: 52
});

Swiper - 2 Column thumbs slide, active slide not always in view

1 Answers