如何在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>