如何在swiper.js中更改swiper slide carousel？

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>