I am wondering if its possible to create something like this using slick slider?
+-------+ +-------+
| | | |
| +-------+ |
+----| |----+
| |
+-------+
The problem es with setting margin between the slides. I found How add spaces between Slick carousel item which explains you can modify margin this way:
/* the slides */
.slick-slide {
margin: 0 27px;
}
/* the parent */
.slick-list {
margin: 0 -27px;
}
However, I am not able to change margin into a negative value, so that the 3rd element would be on top of two instead of just between them.
Did anyone happen to do this or knows any reference link that had something similar?
I am wondering if its possible to create something like this using slick slider?
+-------+ +-------+
| | | |
| +-------+ |
+----| |----+
| |
+-------+
The problem es with setting margin between the slides. I found How add spaces between Slick carousel item which explains you can modify margin this way:
/* the slides */
.slick-slide {
margin: 0 27px;
}
/* the parent */
.slick-list {
margin: 0 -27px;
}
However, I am not able to change margin into a negative value, so that the 3rd element would be on top of two instead of just between them.
Did anyone happen to do this or knows any reference link that had something similar?
Share Improve this question edited May 23, 2017 at 12:17 CommunityBot 11 silver badge asked Apr 10, 2017 at 18:43 Rachel NicolasRachel Nicolas 1,1652 gold badges14 silver badges22 bronze badges1 Answer
Reset to default 5So, if anyone is still interested, I was able to get what I wanted this way:
#wrapper {
width: 100%;
display: table;
table-layout: fixed;
border-collapse: collapse;
padding: 10px; /* important !! */
}
.slick-slide { /* spacing in between each slide */
margin: 0 -10px;
}
.slick-list { /* spacing in between the group of slides */
padding: 0 20px;
}
.slick-track { /* spacing for the slider itself */
min-height: 600px;
}
.slide {
position: relative;
float: left;
}
.slide:nth-child(3n+2) {
top: 10em;
z-index: 1;
}
With these styles I was able to get what I was looking for. However, each first slide from the sibling list was still shown. So for that I went with a script, that basically hides inactive slides and only shows visible ones.
$(document).ready(function(){
/* runs only once */
$(".slide").css({opacity: 0});
$(".slick-active").css({opacity: 1});
/* runs after slides are being changed */
$('#wrapper').on('afterChange', function(event, slick, currentSlide, nextSlide){
$(".slide").animate({opacity: 0}, 100);
$(".slick-active").animate({opacity: 1}, 300);
});
})