Using slick, I'm trying to achieve a slider that looks like this:
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:
- Cannot achieve row layout (
flexon wrapper not playing nicely) - If I uncomment out
initialSlide: 2, the slider breaks. I'm trying to get the center slide as the active slide with this. - Slick not changing slide
from How to make a 3D slick slider

No comments:
Post a Comment