使用Swiper JS滑块-我想左对齐第一张幻灯片，并从屏幕外显示第二张幻灯片的峰值

Question

我正在使用swiper JS设置来覆盖具有以下设置的流。

var swiper = new Swiper('.swiper-container', {
    pagination: '.swiper-pagination',
    effect: 'coverflow',
    grabCursor: true,
    centeredSlides: true,
    slidesPerView: 1,
    loop: true,
    coverflow: {
        rotate: 40,
        stretch: 0,
        depth: 50,
        modifier: 1,
        slideShadows : false
    }
});

然而，我想要显示下一张幻灯片的一部分(可能是20%)，从屏幕的右侧达到峰值。我不希望幻灯片居中，但仍然想覆盖3D效果。这是一个样机，我希望滑块的外观。

​

​

感谢您能提供的任何帮助:)

Answer 1

将滑动条放入容器中，将滑动条宽度设置为您希望活动幻灯片的宽度(例如80%)，并且不要忘记将滑动条的overflow属性设置为visible，将容器的滑动条宽度设置为hidden。

​

(function($){
  $(document).ready(function(){
    var swiper = new Swiper('.swiper', {
      effect: 'coverflow',
      grabCursor: true,
      slidesPerView: 1,
      loop: true,
      coverflow: {
        rotate: 40,
        stretch: 0,
        depth: 50,
        modifier: 1,
        slideShadows : false
      }
    })
  });
})(jQuery);

.container {
  width: 150px;
  height: 100px;
  padding: 20px 10px;
  background-color: lightgrey;
  overflow: hidden;
  margin: 0 auto;
}
.swiper {
  width: 80%;
  height: 100%;
}
.swiper-slide {
  background: white;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.0/css/swiper.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.0/js/swiper.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <div class="swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide"></div>
      <div class="swiper-slide"></div>
      <div class="swiper-slide"></div>
      <div class="swiper-slide"></div>
      <div class="swiper-slide"></div>
    </div>
  </div>
</div>

​

唯一的问题是loop: true参数，因为在上一张幻灯片上，下一张幻灯片似乎只在幻灯片事件发生时添加。

Answer 2

对于https://swiperjs.com/，请使用下面的代码片段作为示例。这对我很有效。

var swiper = new Swiper('.swiperX', {
  initialSlide: 0,
  slidesPerGroup: 1, // helps it to align in the left if set to 1
});