title: How to change swiper slide carousel in swiper.js?
body: <p>I'm struggling with changing swiper slide carousel in cover flow.</p>
  
  <p>This is what I got for now.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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,
    }
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/js/swiper.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/css/swiper.min.css" rel="stylesheet" /&gt;
  &lt;div class="row swiper-container-aboutus"&gt;
    &lt;div class="swiper-wrapper"&gt;
      &lt;div class="swiper-slide"&gt;Slide 1&lt;/div&gt;
      &lt;div class="swiper-slide"&gt;Slide 2&lt;/div&gt;
      &lt;div class="swiper-slide"&gt;Slide 3&lt;/div&gt;
      &lt;div class="swiper-slide"&gt;Slide 4&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="swiper-pagination"&gt;&lt;/div&gt;
    &lt;div class="swiper-button-prev"&gt;&lt;/div&gt;
    &lt;div class="swiper-button-next"&gt;&lt;/div&gt;
  
    &lt;div class="swiper-scrollbar"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>It functions but I would like to change carousel to look like this:</p>
  
  <p><a href="https://i.stack.imgur.com/l9EXg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/l9EXg.png" alt="enter image description here"></a></p>
  
  <p>I have tried by adding this piece of code:</p>
  
  <pre><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;
  }
  </code></pre>
  
  <p>I added <code>transform: rotate(45deg) !important;</code> to transform the slides in diamond shape and they were transformed, but with that I have lost builtin swiper.js <code>translate3d()</code> function.</p>
  
  <p>Is that possible with Swiper.js to edit slides it that way and still have cover flow working as it should? </p>
  
  <p>Any other tips are greatly welcomed.</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>When I put </p>
  
  <pre><code>loop:true;
  centeredSlides: true,
  slidesPerView: 3,
  initialSlide: 2,
  </code></pre>
  
  <p>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. </p>
  
  <p><a href="https://i.stack.imgur.com/nZ7f0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nZ7f0.png" alt="enter image description here"></a></p>
  
  <p>Is it possible to start centered? I though that this <code>centeredSlides: true</code> will do it.</p>