javascript - 使用 Swiper JS slider - 我想将第一张幻灯片左对齐，并从屏幕外显示第二张幻灯片

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%)，从屏幕右侧开始显示。我不希望幻灯片居中，但仍希望 coverflow 3D 效果。这是我希望 slider 外观的模型。

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

Answer 1

将 swiper 放入容器中，将 swiper 宽度设置为您希望事件幻灯片的宽度(例如 80%)并且不要忘记将 overflow 属性设置为 visible 对于 swiper 和 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 参数，因为在上一张幻灯片上时，下一张幻灯片似乎只在幻灯片事件发生时添加。