Swiper - слайд с большим пальцем в 2 столбца, активный слайд не всегда виден

Когда я нажимаю «Далее» на главном ползунке свайпера «герой» несколько раз (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,
  },
});

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


javascript jquery swiper
person jonny-harte    schedule 25.06.2019    source источник
comment
ОТ: Я хотел посмотреть, но нигде не нашел упомянутую ссылку. Это снимок экрана страницы в FF, изображения не масштабируются должным образом. Увидел только два предупреждения и никаких ошибок в консоли браузера, поэтому, скорее всего, это не из-за заблокированных или отсутствующих скриптов.   -  person SaschaM78    schedule 25.06.2019
comment
Похоже, у меня там была проблема с flexbox. Теперь должно быть нормально в firefox.   -  person jonny-harte    schedule 25.06.2019
comment
Теперь действительно хорошо смотрится в FF!   -  person SaschaM78    schedule 25.06.2019

Ответы (1)


arrow_upward
0
arrow_downward

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

var thumbsSwiper = new Swiper('.swiper-container-thumbs', {
  slidesPerView: 10,
  height: 52
});
person SaschaM78    schedule 25.06.2019
comment
Откуда у вас 104px? Большой палец 82px. Я пробовал добавить высоту 41 в качестве параметра, и теперь у слайдов 0 высота? - person jonny-harte; 25.06.2019
comment
@ harte11 104 получается из 84 пикселей в высоту плюс 20 зазор. Я пытался создать Fiddle из кода вашей страницы, но это слишком сложно, чтобы просто переместить соответствующие части в Codepen или Fiddle. Если вы могли позаботиться об этом, я обязательно проверю и, скорее всего, найду для вас решение. - person SaschaM78; 25.06.2019
comment
Я попробую, но это закопано в проекте ... Я добавил WatchSlidesVisibility: true и работает намного лучше. Нажатие «Далее» - это нормально, только когда вы нажмете «Назад», он теряет активный слайд между слайдами 11–9. - person jonny-harte; 26.06.2019
comment
@ harte11 Как говорится в документации, WatchSlidesVisibility всегда должен быть включен. Интересно, почему тогда разработчики установили значение false по умолчанию. На самом деле это будет ошибка, которую вы обнаружили, и о ней стоит сообщить на странице проблем проекта Github, поэтому Надеюсь, это скоро будет исправлено. - person SaschaM78; 26.06.2019