Question

我正在尝试创建一个控制主画廊的垂直拇指画廊。我遇到的问题是，当单击某些拇指时，拇指图库会自动滑动。有没有一种方法可以禁用该滑动，并使其仅在单击导航按钮时发生所有滑动？

我也在缩略图库中遇到间距问题，这在查看下面的小提琴/片段时很明显。我需要一个6像素的间隙。同样，第二栏中的拇指也被切除了。我不明白，因为我为图库设置了166px的宽度（2个80px媒体项目+ 6px间隔= 166px）。

let galleryThumbs = new Swiper('.prod-gallery .gallery-thumbs', {
  spaceBetween: 6,
  slidesPerGroup: 1,
  slidesPerView: 5,
  slidesPerColumn: 2,
  //slideToClickedSlide: true,
  //allowTouchMove: false,
  //freeMode: true,
  //watchSlidesVisibility: true,
  //watchSlidesProgress: true,
  direction: 'vertical',
  noSwiping: false,

  navigation: {
    nextEl: '.gallery-thumbs-wrap .next',
    prevEl: '.gallery-thumbs-wrap .prev',
  },

  //controller: {
  //control: galleryTop,
  //},
});

let galleryTop = new Swiper('.prod-gallery .gallery-main', {
  spaceBetween: 10,
  thumbs: {
    swiper: galleryThumbs
  }
});

//galleryThumbs.controller.control = galleryTop;

.prod-gallery {
     display: grid;
     grid-template-columns: 166px minmax(20px, 76px) 300px;
     align-items: center;
}
 .prod-gallery .gallery-thumbs {
     height: 530px;
}
 .prod-gallery .gallery-thumbs .swiper-slide {
     cursor: pointer;
     width: 80px;
     opacity: 0.4;
}
 .prod-gallery .gallery-thumbs .swiper-slide-thumb-active {
     opacity: 1;
}
 .prod-gallery .gallery-thumbs .media {
     width: 80px;
     height: 100px;
     background: grey;
     display: flex;
     align-items: center;
     justify-content: center;
}
 .prod-gallery .gallery-main {
     width: 100%;
     grid-column-start: 3;
}
 .prod-gallery .gallery-main .media {
     width: 300px;
     height: 300px;
     background: grey;
     display: flex;
     align-items: center;
     justify-content: center;
}
 img {
     max-width: 100%;
     height: auto;
}

<script src="https://unpkg.com/swiper@6.3.4/swiper-bundle.js"></script>
<link href="https://unpkg.com/swiper@6.3.4/swiper-bundle.css" rel="stylesheet"/>
<div class="prod-gallery">

  <div class="gallery-thumbs-wrap swiper-no-swiping">
    <!-- Nav -->
    <div class="nav-btn prev">
      <img src="https://via.placeholder.com/30x30">
    </div>
    <div class="nav-btn next">
      <img src="https://via.placeholder.com/30x30">
    </div>

    <!-- Slider -->
    <div class="gallery-thumbs swiper-container">
      <div class="swiper-wrapper" style="height: 742px; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;">
        <div class="swiper-slide">
          <div class="media">1</div>
        </div>
        <div class="swiper-slide">
          <div class="media">2</div>
        </div>
        <div class="swiper-slide">
          <div class="media">3</div>
        </div>
        <div class="swiper-slide">
          <div class="media">4</div>
        </div>
        <div class="swiper-slide">
          <div class="media">5</div>
        </div>
        <div class="swiper-slide">
          <div class="media">6</div>
        </div>
        <div class="swiper-slide">
          <div class="media">7</div>
        </div>
        <div class="swiper-slide">
          <div class="media">8</div>
        </div>
        <div class="swiper-slide">
          <div class="media">9</div>
        </div>
        <div class="swiper-slide">
          <div class="media">10</div>
        </div>
        <div class="swiper-slide">
          <div class="media">11</div>
        </div>
        <div class="swiper-slide">
          <div class="media">12</div>
        </div>
        <div class="swiper-slide">
          <div class="media">13</div>
        </div>
      </div>
    </div>
  </div>

  <div class="gallery-main swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <div class="media">1</div>
      </div>
      <div class="swiper-slide">
        <div class="media">2</div>
      </div>
      <div class="swiper-slide">
        <div class="media">3</div>
      </div>
      <div class="swiper-slide">
        <div class="media">4</div>
      </div>
      <div class="swiper-slide">
        <div class="media">5</div>
      </div>
      <div class="swiper-slide">
        <div class="media">6</div>
      </div>
      <div class="swiper-slide">
        <div class="media">7</div>
      </div>
      <div class="swiper-slide">
        <div class="media">8</div>
      </div>
      <div class="swiper-slide">
        <div class="media">9</div>
      </div>
      <div class="swiper-slide">
        <div class="media">10</div>
      </div>
      <div class="swiper-slide">
        <div class="media">11</div>
      </div>
      <div class="swiper-slide">
        <div class="media">12</div>
      </div>
      <div class="swiper-slide">
        <div class="media">13</div>
      </div>
    </div>
  </div>

</div>

Answer 1

添加slidesPerColumnFill：'row'和幻灯片之间的缩进将是正确的

Answer 2

这里有两个选项：

列沿垂直方向

DEMO

1..4
2..5
3..6

需要添加slidesPerColumnFill: 'row'

列沿水平方向

DEMO

1..2
3..4
5..6

需要为 flex-direction: row; 设置属性 .swiper-container-multirow-column > .swiper-wrapper

.swiper-container-multirow-column > .swiper-wrapper{
  flex-direction: row;
}

垂直滑动滑块+多列拇指图库自动滑动问题

2 个答案: