Friday, 28 May 2021

How to make a 3D slick slider

Using slick, I'm trying to achieve a slider that looks like this:

enter image description here

In the above, the center slide is the default selected when slick initiates. Then, when an arrow is clicked, the slick-current class will shift onto a new div and css translate can be used to scale the image.

Here is my current code:

$(function(){

  $("#downloadNow__slick").slick({
    slidesToShow: 3,
    // initialSlide: 2,
    centerMode: true,
    centerPadding: "53px",
    arrows: true,
    dots: false,
    infinite: true,
    cssEase: 'linear',
  });

});
.downloadNow {
  background: grey;
  padding: 60px 0px;

  &__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%;
  }


}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous"></script>


<section class="downloadNow">
  <div class="downloadNow__wrapper">


    <div class="downloadNow__slides" id="downloadNow__slick">
      <div class="downloadNowCard">Card 1</div>
      <div class="downloadNowCard">Card 2</div>
      <div class="downloadNowCard">Card 3</div>
    </div>
   

  </div>
</section>

Current issues:

  1. Cannot achieve row layout (flex on wrapper not playing nicely)
  2. If I uncomment out initialSlide: 2, the slider breaks. I'm trying to get the center slide as the active slide with this.
  3. Slick not changing slide


from How to make a 3D slick slider

No comments:

Post a Comment