Question

当我在“英雄”主滑动滑块上多次单击下一步时（10）。处于显示状态的拇指将失去同步，并且不再显示活动的拇指。

我正在尝试在引导程序模版中将两个滑动器滑块链接在一起。拇指滑块是垂直的两列滑块，并链接到模态内部的主“英雄”滑块。

向下滚动页面，然后单击“查看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,
  },
});

活动缩略图幻灯片应始终在视图中。

Answer 1

自动高度计算以及两列布局似乎是有问题的。现在，在移至下一张幻灯片时，脚本使用Y轴上的.translate3d()和一个图像的高度滚动拇指。如果您要通过Parameters setting手动将高度设置为图像的一半高度（即52像素而不是104像素），则当前显示的元素不应移出视线。初始化将与此类似：

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

滑动器-2列拇指滑块，活动滑块并不总是在视野中

1 个答案: