I’m using slick carousel. Each slide has a description, but I made it so that the description is shown only for the central block.
But because of this, my slides are uneven. How can I align my slides so they are all evenly lined up at the bottom? Regardless of the text that may be in the description.
And another question, now my description disappears and appears after the slide scrolls to the end. Is it possible to make the description disappear and appear instantly, that is, not at the end of the scroll, but at the very beginning?
$(document).ready(function(){
$('.carousel').slick({
centerMode: true,
centerPadding: '0px',
slidesToShow: 3,
autoplay: true,
autoplaySpeed: 3000,
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
]
});
$('.carousel .slick-center').addClass('center');
$('.carousel').on('afterChange', function(event, slick, currentSlide){
var centerIndex = Math.floor(slick.slideCount / 2);
$('.slide').removeClass('center');
$('.slick-center').addClass('center');
});
});html, body {
background-color: #e74c3c;
}
.wrapper {
width: 100%;
padding-top: 20px;
text-align: center;
}
.carousel {
width: 90%;
margin: 0px auto;
}
.slick-slide {
margin: 10px;
}
.slick-slide img {
width: 100%;
border-radius: 10px;
}
.slide .description {
display: none;
}
.slide .info {
padding: 10px;
}
.slide.center .info {
border-radius: 10px 10px 0 0;
border: 2px solid #fff;
border-bottom: none;
}
.slide.center .description {
display: block;
}
.slide.center.slick-slide img{
border-radius: 0 0 10px 10px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet"/>
<div class="wrapper">
<div class="carousel">
<div class="slide">
<div class="info">
<div class="title">TITLE 1</div>
<div class="description">Description for the first slide</div>
</div>
<img src="https://picsum.photos/300/200?random=1" alt="Slide 1">
</div>
<div class="slide">
<div class="info">
<div class="title">TITLE 2</div>
<div class="description">Description for the second slide</div>
</div>
<img src="https://picsum.photos/300/200?random=2" alt="Slide 2">
</div>
<div class="slide">
<div class="info">
<div class="title">TITLE 3</div>
<div class="description">Description for the third slide</div>
</div>
<img src="https://picsum.photos/300/200?random=3" alt="Slide 3">
</div>
<div class="slide">
<div class="info">
<div class="title">TITLE 4</div>
<div class="description">Description for the fourth slide</div>
</div>
<img src="https://picsum.photos/300/200?random=4" alt="Slide 4">
</div>
<div class="slide">
<div class="info">
<div class="title">TITLE 5</div>
<div class="description">Description for the fifth slide</div>
</div>
<img src="https://picsum.photos/300/200?random=5" alt="Slide 5">
</div>
<div class="slide">
<div class="info">
<div class="title">TITLE 6</div>
<div class="description">Description for the sixth slide</div>
</div>
<img src="https://picsum.photos/300/200?random=6" alt="Slide 6">
</div>
</div>
</div>