Swiper - 2 列拇指幻灯片，活动幻灯片并不总是在视图中答案

【问题标题】：Swiper - 2 Column thumbs slide, active slide not always in viewSwiper - 2 列拇指幻灯片，活动幻灯片并不总是在视图中
【发布时间】：2019-06-25 10:19:23
【问题描述】：

当我多次单击主“英雄”滑动滑块 (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,
  },
});

活动的缩略图幻灯片应始终可见。

【问题讨论】：

OT：我想看看，但在任何地方都找不到提到的链接。 This is a screenshot of the page in FF，图像无法正确缩放。在浏览器控制台中只看到两个警告并且没有错误，因此很可能不是由于脚本被阻止或丢失。
看起来我在那里遇到了 flexbox 问题。现在在 Firefox 上应该可以了。
现在在 FF 中看起来真的很棒！

标签： javascript jquery swiper

【解决方案1】：

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

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

【讨论】：

你从哪里得到 104px？拇指为 82 像素。我尝试添加高度 41 作为参数，现在幻灯片的高度为 0？
@harte11 104 来自 84 像素高度加上 20 的间隙。我试图从您的页面代码创建一个 Fiddle，但简单地将相关部分移动到 Codepen 或 Fiddle 中太复杂了。如果您能解决这个问题，我一定会检查并很可能会为您找到解决方案。
我会尝试，但它被埋在一个项目中......我添加了“WatchSlidesVisibility：true”，它工作得更好。单击下一个很好，只有当您单击上一个时，它才会失去幻灯片 11-9 之间的活动。
@harte11 正如文档所说“应始终启用 WatchSlidesVisibility”。我想知道为什么开发人员将其默认设置为“false”。这实际上是您发现的一个错误，值得在Github project issue page 上报告它，因此希望它会很快得到修复。