I am working with the slick slider and aiming to achieve a specific layout for the slider itself. What I require is a structure that looks like this:
div div
div div
div
I have managed to implement this design successfully, but when it transitions or slides automatically, it reverts to a different layout:
div div div div div
It returns to the original design once the transition is complete. I am curious to know if it is possible to maintain the initial layout during the transition. Below you'll find the CSS, HTML, and jQuery code I am currently using.
HTML:
<div class="loop">
<div class="product"> Your Content </div>
<div class="product"> Your Content </div>
<div class="product"> Your Content </div>
<div class="product"> Your Content </div>
<div class="product"> Your Content </div>
<div class="product"> Your Content </div>
<div class="product"> Your Content </div>
</div>
CSS:
.active:first-child {
margin-top: 10px; }
.test, .slick-active:nth-child(1), .slick-active:nth-child(5) {
margin-top: 10px; }
.test-2, .slick-active:nth-child(2), .slick-active:nth-child(4) {
margin-top: 40px; }
.center-test, .slick-active:nth-child(3) {
margin-top: 70px; }
JavaScript:
$(document).ready(function () {
var loop = $(".loop");
loop.slick({
slidesToShow: 5,
sliderPerRow: 1,
swipeToSlide: true
});
loop.on('afterChange', function (event, slick, currentSlide, nextSlide) {
loop.find(".slick-active").first().addClass("test");
loop.find(".slick-active").last().addClass("test");
loop.find(".slick-active").eq(1).addClass("test-2");
loop.find(".slick-active").eq(3).addClass("test-2");
loop.find(".slick-active").eq(2).addClass("center-test");
});
loop.on('beforeChange', function (event, slick, currentSlide, nextSlide) {
loop.find(".slick-active ").removeClass("test");
loop.find(".slick-active ").removeClass("test-2");
loop.find(".slick-active ").removeClass("center-test");
});
loop.find(".slick-active").removeClass("test");
loop.find(".slick-active").first().addClass("test");
loop.find(".slick-active").last().addClass("test");
loop.find(".slick-active").eq(1).addClass("test-2");
loop.find(".slick-active").eq(3).addClass("test-2");
loop.find(".slick-active").eq(2).addClass("center-test");
});
To achieve the desired layout during the transition, it might be necessary to use an offset instead of a margin. Refer to the slick slider documentation for more information:
EDIT
I have also included additional CSS code instead of applying margins to the div elements.
.test, .slick-active:nth-child(1), .slick-active:nth-child(5){
top:10px;
position:relative;
}
.test-2, .slick-active:nth-child(2), .slick-active:nth-child(4){
top:40px;
position:relative;
}
.center-test, .slick-active:nth-child(3){
top:70px;
position:relative;
}
.slick-track{
height:100px;
}
After observing the behavior, it seems that the class for the structural change is applied after the slide transition is completed, as indicated by 'afterChange' in the JS. Is it possible to apply the structure during the transition itself?