javascript - 如何更改 Swiper Cover Flow Slider 中幻灯片的渲染流程

Question

在我的元素中安装了 Swiper

https://idangero.us/swiper/api/#coverflow-effect

我想像这个例子一样使用封面流效果:

https://codepen.io/addzycullen/pen/kXKKBZ

我已经安装了 Swiper 并将它的 CSS、JS CDN 添加到元素中。

 var mySwiper = new Swiper ('.swiper-container-aboutus', {
    // Optional parameters
    effect: 'coverflow',
    loop: true,
    centeredSlides: true,
    slidesPerView: 3,
    initialSlide: 3,
    keyboardControl: true,
    mousewheelControl: true,
    lazyLoading: true,
    preventClicks: false,
    preventClicksPropagation: false,
    lazyLoadingInPrevNext: true,
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    coverflow: {
      rotate: 0,
      stretch: 0,
      depth: 250,
      modifier: 1,
      slideShadows : false,
    }
  })

.swiper-container-aboutus {
  height: 400px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row swiper-container-aboutus">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    <div class="swiper-slide">Slide 4</div>
    <div class="swiper-slide">Slide 5</div>

  </div>
  <div class="swiper-pagination"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <div class="swiper-scrollbar"></div>
</div>
</div>

script.js

已将此部分添加为 jQuery:

$(document).ready(function () {

  var mySwiper = new Swiper ('.swiper-container-aboutus', {

    effect: 'coverflow',
    loop: true,
    centeredSlides: true,
    slidesPerView: 3,
    initialSlide: 3,
    keyboardControl: true,
    mousewheelControl: true,
    lazyLoading: true,
    preventClicks: false,
    preventClicksPropagation: false,
    lazyLoadingInPrevNext: true,
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    coverflow: {
      rotate: 0,
      stretch: 0,
      depth: 250,
      modifier: 1,
      slideShadows : false,
    }
  })
});

从代码片段可以看出，我已经实现了封面流效果，但不是以想要的方式。

我不确定我遗漏了什么任何建议非常感谢。

Answer 1

这里有不同版本的 Swiper:4.5.0，在 codepen 示例中:3.3.1 - 检查 CHANGELOG找出差异。