title: How to make a 3D slick slider
body: <p>Using <code>slick</code>, I'm trying to achieve a slider that looks like this:</p>
  <p><a href="https://i.stack.imgur.com/jIkPl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jIkPl.png" alt="enter image description here" /></a></p>
  <p>In the above, the center slide is the default selected when <code>slick</code> initiates. Then, when an arrow is clicked, the <code>slick-current</code> class will shift onto a new div and css translate can be used to scale the image.</p>
  <p>Here is my current code:</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>$(function(){
  
    $("#downloadNow__slick").slick({
      slidesToShow: 3,
      // initialSlide: 2,
      centerMode: true,
      centerPadding: "53px",
      arrows: true,
      dots: false,
      infinite: true,
      cssEase: 'linear',
    });
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.downloadNow {
    background: grey;
    padding: 60px 0px;
  
    &amp;__wrapper {
      position: relative;
    }
    
    .downloadNowCard{
      background: white;
      padding: 100px;
    }
  
  
    .slider {
      max-width: 1110px;
      margin: 0 auto;
    }
  
    .slick-track {
      padding-top: 53px;
      padding-bottom: 53px;
    }
  
    .slick-slide {
      text-align: center;
      transition: transform 0.3s ease-in-out;
    }
  
  
    .slick-slide.slick-current {
      transform: scale(1.35);
      position: relative;
      z-index: 1;
    }
  
    .slick-slide img {
      width: 100%;
    }
  
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"&gt;&lt;/script&gt;
  
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous"&gt;&lt;/script&gt;
  
  
  &lt;section class="downloadNow"&gt;
    &lt;div class="downloadNow__wrapper"&gt;
  
  
      &lt;div class="downloadNow__slides" id="downloadNow__slick"&gt;
        &lt;div class="downloadNowCard"&gt;Card 1&lt;/div&gt;
        &lt;div class="downloadNowCard"&gt;Card 2&lt;/div&gt;
        &lt;div class="downloadNowCard"&gt;Card 3&lt;/div&gt;
      &lt;/div&gt;
     
  
    &lt;/div&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><strong>Current issues:</strong></p>
  <ol>
  <li>Cannot achieve row layout (<code>flex</code> on wrapper not playing nicely)</li>
  <li>If I uncomment out <code>initialSlide: 2</code>, the slider breaks. I'm trying to get the center slide as the active slide with this.</li>
  <li>Slick not changing slide</li>
  </ol>