4

我尝试用这样的拇指制作一个滑块但
我希望我的滑块是loop=true并且我的拇指是loop=false。这是我的设置

var galleryTop = new Swiper('.gallery-top', {
      spaceBetween: 10,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      loop: true
});
var galleryThumbs = new Swiper('.gallery-thumbs', {
      spaceBetween: 10,
      centeredSlides: true,
      slidesPerView: 'auto',
      touchRatio: 0.2,
      slideToClickedSlide: true
});
galleryTop.controller.control = galleryThumbs;
galleryThumbs.controller.control = galleryTop;

但一切都不起作用。我的滑块和我的拇指不做同样的事情。怎么做谢谢。

4

1 回答 1

7

这样做的一种方法是删除幻灯片的关联并使用滑动事件手动滑动它们

galleryTop.on('slideChangeTransitionEnd', function() {
  let index_currentSlide = galleryTop.realIndex;
  let currentSlide = galleryTop.slides[index_currentSlide]
  galleryThumbs.slideTo(index_currentSlide, 1000, false);
});

galleryThumbs.on('slideChangeTransitionEnd', function() {
  let index_currentSlide = galleryThumbs.realIndex;
  let currentSlide = galleryThumbs.slides[index_currentSlide]
  galleryTop.slideTo(index_currentSlide, 1000, false);
});

下面是一个工作示例，我在其中添加了上面的代码并删除了 2 个控制器关联。

var galleryTop = new Swiper('.gallery-top', {
  spaceBetween: 10,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  loopedSlides: 5,
  loop: true
});
var galleryThumbs = new Swiper('.gallery-thumbs', {
  spaceBetween: 10,
  centeredSlides: true,
  slidesPerView: 'auto',
  slideToClickedSlide: true,
  loopedSlides: 5
});

galleryTop.on('slideChangeTransitionEnd', function() {
  let index_currentSlide = galleryTop.realIndex;
  let currentSlide = galleryTop.slides[index_currentSlide]
  galleryThumbs.slideTo(index_currentSlide, 1000, false);
});

galleryThumbs.on('slideChangeTransitionEnd', function() {
  let index_currentSlide = galleryThumbs.realIndex;
  let currentSlide = galleryThumbs.slides[index_currentSlide]
  galleryTop.slideTo(index_currentSlide, 1000, false);
});
body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
  height: 300px;
}

.swiper-container {
  width: 100%;
  height: 300px;
  margin: 20px auto;
}

.swiper-slide-container {
  text-align: center;
  font-size: 18px;
  background: #fff;
  height: 100%;
  max-width: 600px;
  margin: auto;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.gallery-top {
  height: 80%;
  width: 100%;
}

.gallery-thumbs {
  height: 20%;
  box-sizing: border-box;
  padding: 10px 0;
}

.gallery-thumbs .swiper-slide {
  width: 20%;
  height: 100%;
  opacity: 0.4;
}

.gallery-thumbs .swiper-slide-active {
  opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js" integrity="sha512-WNLxfP/8cVYL9sj8Jnp6et0BkubLP31jhTG9vhL/F5uEZmg5wEzKoXp1kJslzPQWwPT1eyMiSxlKCgzHLOTOTQ==" crossorigin="anonymous"></script>
<script src="https://unpkg.com/swiper@6.0.4/swiper-bundle.js"></script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/swiper@6.0.4/swiper-bundle.css" />

<body>
  <div class="swiper-container gallery-top">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <div class="swiper-slide-container">Slide 1</div>
      </div>
      <div class="swiper-slide">
        <div class="swiper-slide-container">Slide 2</div>
      </div>
      <div class="swiper-slide">
        <div class="swiper-slide-container">Slide 3</div>
      </div>
      <div class="swiper-slide">
        <div class="swiper-slide-container">Slide 4</div>
      </div>
      <div class="swiper-slide">
        <div class="swiper-slide-container">Slide 5</div>
      </div>
    </div>
    <!-- Add Arrows -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>
  <div class="swiper-container gallery-thumbs">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <div class="swiper-slide-container">Slide 1</div>
      </div>
      <div class="swiper-slide">
        <div class="swiper-slide-container">Slide 2</div>
      </div>
      <div class="swiper-slide">
        <div class="swiper-slide-container">Slide 3</div>
      </div>
      <div class="swiper-slide">
        <div class="swiper-slide-container">Slide 4</div>
      </div>
      <div class="swiper-slide">
        <div class="swiper-slide-container">Slide 5</div>
      </div>
    </div>
  </div>
</body>

于 2020-07-31T07:26:32.310 回答