Swiper - слайд с двумя колонками, активный слайд не всегда на виду - PullRequest
Новая
       21

Swiper - слайд с двумя колонками, активный слайд не всегда на виду

0 голосов
/ 25 июня 2019

Когда я нажимаю «Далее» на главном слайдере «герой» несколько раз (10).Большие пальцы видны из-за синхронизации, а активный большой палец больше не виден.

Я пытаюсь связать два ползунка swiper вместе в модале начальной загрузки.Ползунок "большие пальцы" - это вертикальный ползунок с двумя столбцами, связанный с основным ползунком "герой" внутри модального окна.

Прокрутите страницу вниз и нажмите "просмотреть 23 фотографии", чтобы открыть модальное окно.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,
  },
});

Всегда должен быть виден активный слайд с миниатюрами.

1 Ответ

0 голосов
/ 25 июня 2019

Может показаться проблематичным автоматический расчет высоты вместе с двухколоночной разметкой.Прямо сейчас при переходе к следующему слайду скрипт использует .translate3d() на оси Y с высотой одного изображения для прокрутки больших пальцев.Если вы вручную установите высоту с помощью Parameters, установив на половину высоты изображения (что будет 52 пикселя, а не 104 пикселя), отображаемый в данный момент элемент не должен выходить из поля зрения.Инициализация будет похожа на это: 

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