Question

我有两个滑动幻灯片放映，应该同时滚动。到目前为止，一切正常。但是我想反转第二个幻灯片的滚动方向，并保持第一个幻灯片的自然方向。我试图做到这一点，使负翻译价值为正。但这并没有真正起作用……这是我到目前为止所做的：

Codepen： https://codepen.io/Dennisade/pen/eaRLZW

var numItems = $('.swiper-slide').length;

var imageSlider = new Swiper(".image-slider", {
  loopedSlides: numItems,
  loop: true,
  slidesPerView: "auto",
  freeMode: true,
  mousewheel: {
    releaseOnEdges: true,
  }
});

var overlay = new Swiper(".overlay", {
  loopedSlides: numItems,
  loop: true,
  slidesPerView: "auto",
  freeMode: true,
  reverseDirection: true,
  mousewheel: {
    releaseOnEdges: true,
    invert:true,
  },
});

imageSlider.on('setTranslate', function onSliderMove() {
  var scrollValue = this.translate;
  overlay.setTranslate(scrollValue);
});

.swiper-container,
.swiper-wrapper {
  height: 50vh;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: end;
  align-items: flex-end;
}

.swiper-wrapper {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: end;
  align-items: flex-end;
}

.swiper-slide {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: end;
  align-items: flex-end;
  width: auto;
}
.swiper-slide img {
  max-width: auto;
  max-height: 100%;
}

.thumbContainer img {
  display: block;
  max-width: auto;
  width:100%
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.css" rel="stylesheet"/>


<div class="image-text">Value</div>

<div class="swiper-container image-slider">

  <div class="swiper-wrapper overlay-wrapper">
   
    <div class="swiper-slide">
        <div class="thumbContainer">
          <img src="https://via.placeholder.com/560/FF0000/FFFFFF?Text=Down.com">
        </div>
    </div>
    
    <div class="swiper-slide">
        <div class="thumbContainer">
          <img src="https://via.placeholder.com/560/FF0000/FFFFFF?Text=Down.com">
        </div>
    </div>
    
    <div class="swiper-slide">
        <div class="thumbContainer">
          <img src="https://via.placeholder.com/560/FF0000/FFFFFF?Text=Down.com">
        </div>
    </div>
    
  </div>

</div>


<div class="swiper-container overlay">

  <div class="swiper-wrapper">
   
    <div class="swiper-slide">
        <div class="thumbContainer">
          <img src="https://via.placeholder.com/560/000000/FFFFFF?Text=Down.com">
        </div>
    </div>
    
     <div class="swiper-slide">
        <div class="thumbContainer">
          <img src="https://via.placeholder.com/560/000000/FFFFFF?Text=Down.com">
        </div>
    </div>
    
     <div class="swiper-slide">
        <div class="thumbContainer">
          <img src="https://via.placeholder.com/560/000000/FFFFFF?Text=Down.com">
        </div>
    </div>
    
  </div>

</div>






<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

您可以使用 slidesPerGroup 属性对多张幻灯片进行分组，这允许您一次滚动多张幻灯片。要更深入地了解它以及如何对其进行自定义，请参阅此处的 API 文档{{3}}

同时滚动两个Swiper Slider幻灯片

1 个答案: