Question

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

不是只显示它应该的幻灯片，而是重复幻灯片来填充容器高度，垂直缩略图不会在点击时更改幻灯片，当有5个或更多幻灯片时滑块工作正常。

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

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

使用少于5张幻灯片时，滑块滑块无法正常工作

1 个答案: