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?

• javascript
• jquery
• html
• css

1 Answer 1

So, 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);
        });
    })