如何在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来查找差异。