javascript - 如何在 swiper.js 中更改 swiper 幻灯片轮播？

Question

我正在努力改变封面流程中的刷卡器幻灯片轮播。

这就是我现在得到的。

var mySwiper = new Swiper('.swiper-container-aboutus', {
  // Optional parameters
  effect: 'coverflow',
  loop: true,
  centeredSlides: true,
  slidesPerView: 3,
  initialSlide: 0,
  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: 500px;
}

.swiper-slide{
  background-color: rgb(255, 0, 0);
    width: 490px;
    z-index: 1;
    transition-duration: 0ms;
    display: inline-block;
    overflow: hidden;
    height: 490px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/js/swiper.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/css/swiper.min.css" rel="stylesheet" />
<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>
  <div class="swiper-pagination"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

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

它的功能，但我想改变轮播看起来像这样:

我试过添加这段代码:

.swiper-slide{
    background-color: rgb(255, 0, 0);
    width: 490px;
    z-index: 1;
    transition-duration: 0ms;
    display: inline-block;
    overflow: hidden;
    height: 490px;
    transform: rotate(45deg) !important;
}

我添加了 transform: rotate(45deg) !important; 以将幻灯片转换成菱形并且它们被转换了，但是我失去了内置的 swiper.js translate3d() 函数。

是否可以使用 Swiper.js 以这种方式编辑幻灯片并且仍然让封面流程正常工作？

非常欢迎任何其他提示。

编辑

当我放

loop:true;
centeredSlides: true,
slidesPerView: 3,
initialSlide: 2,

我的封面流程从左侧开始，而不是像我希望的那样从中间开始。这是为什么？在照片上你可以看到它，当我点击下一个时它会移到右侧。

可以居中开始吗？我认为这个 centeredSlides: true 会做到这一点。

Answer 1

var mySwiper = new Swiper('.swiper-container-aboutus', {
  // Optional parameters
  effect: 'coverflow',
  loop: true,
  centeredSlides: true,
  slidesPerView: 3,
  initialSlide: 0,
  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: 200px;
}

.swiper-slide {
  width: 60px;
  z-index: 1;
  transition-duration: 0ms;
  display: inline-block;
  height: 60px;
}

.slide-content {
  background-color: rgb(255, 0, 0);
  height: 100%;
  border: 1px solid;
  transform: rotate(45deg);
}

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