javascript - 滑动滑块少于5张时，滑动滑块无法正常工作

因此，我创建了一个带有缩略图导航的滑块，但是当幻灯片少于5张时，问题开始出现。

重复显示幻灯片以填充容器高度，并且垂直缩略图不会更改单击后的幻灯片，而只是显示5张或更多张幻灯片，它可以很好地工作，而不仅仅是显示应该显示的幻灯片。

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

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>

最佳答案

创建“ 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,
    });