I'm struggling with changing swiper slide carousel in cover flow.

This is what I got for now.

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=".3.1/js/swiper.min.js"></script>
<link href=".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>

I'm struggling with changing swiper slide carousel in cover flow.

This is what I got for now.

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./ajax/libs/Swiper/3.3.1/js/swiper.min.js"></script>
<link href="https://cdnjs.cloudflare./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>

It functions but I would like to change carousel to look like this:

I have tried by adding this piece of code:

.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;
}

I added transform: rotate(45deg) !important; to transform the slides in diamond shape and they were transformed, but with that I have lost builtin swiper.js translate3d() function.

Is that possible with Swiper.js to edit slides it that way and still have cover flow working as it should?

Any other tips are greatly weled.

EDIT

When I put

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

My cover flow starts from left side and not from middle like I would like. Why is that? On photo you can see it, and when I click for next one it shifts to right side.

Is it possible to start centered? I though that this centeredSlides: true will do it.

• javascript
• jquery
• html
• css
• swiper.js

1 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./ajax/libs/Swiper/3.3.1/js/swiper.min.js"></script>
<link href="https://cdnjs.cloudflare./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>