使用 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%），从屏幕右侧开始显示。我不希望幻灯片居中，但仍希望 coverflow 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
});

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

Using Swiper JS slider - I would like to align first slide left, and show second slide peaking from off screen

javascript

jquery

swiper