时间戳

首页 > 解决方案 > Swiper - 2 列拇指幻灯片，活动幻灯片并不总是在视图中

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

问题描述

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

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

标签： javascriptjqueryswiper

解决方案

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

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

推荐阅读