javascript - 少于 5 张幻灯片时，Swiper slider 无法正常工作

Question

所以，我创建了一个带有缩略图导航的 slider ，但是当它的幻灯片少于 5 个时，问题就开始出现了。

它不是只显示它应该显示的幻灯片，而是重复幻灯片以填充容器高度，并且垂直缩略图不会在单击时更改幻灯片，当有 5 张或更多幻灯片时， slider 工作正常。

而且当您单击下一个按钮时，它会闪烁垂直 slider ，只显示应显示的幻灯片，我认为这与循环有关，但我想保留它。如果有人知道如何解决这个问题，我将不胜感激。

JSFiddle

var sliderThumbnails = new Swiper('.slider-thumbnails', {
  direction: 'vertical',
  slidesPerView: 'auto',
  slideToClickedSlide: true,
  loop: true,
  loopedSlides: 50,
});

var sliderGallery = new Swiper('.slider-gallery', {
  slidesPerView: 1,
  loop: true,
  loopedSlides: 50,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  }
});

sliderGallery.controller.control = sliderThumbnails;
sliderThumbnails.controller.control = sliderGallery;

body {
  padding: 20px;
}

.slider-thumbnails {
  float: left;
  width: calc(16% - 20px);
  margin-right: 20px;
  height: 200px;
}

.slider-thumbnails .swiper-slide {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  cursor: pointer;
}

.slider-thumbnails .swiper-slide-active {
  border: 1px solid grey;
}

.slider-thumbnails .swiper-slide:hover {
  border: 1px solid grey;
}

.slider-gallery {
  float: right;
  width: 84%;
  height: 200px;
}

.slider-gallery .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 1px solid grey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/js/swiper.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/css/swiper.min.css" rel="stylesheet" />
<div class="swiper-container slider-thumbnails">
  <div class="swiper-wrapper">
    <div class="swiper-slide">1</div>
    <div class="swiper-slide">2</div>
  </div>
</div>
<div class="swiper-container slider-gallery">
  <div class="swiper-wrapper">
    <div class="swiper-slide">1</div>
    <div class="swiper-slide">2</div>
  </div>
  <!-- Add Arrows -->
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</div>

Answer 1

在创建 'sliderThumbnails' 对象时，您指定了 slidesPerView: 'auto' 。因此，缩略图试图填充可用的垂直空间。更改 slidesPerView:如果有 2 张幻灯片则为 2，如果有 3 张幻灯片则为 3...如果超过或等于 5 张幻灯片等则将其更改为 5。

var sliderThumbnails = new Swiper('.slider-thumbnails', {
      direction: 'vertical',
      slidesPerView: 2,
      slideToClickedSlide: true,
      loop: true,
      loopedSlides: 50,
    });