最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Slick: how to edit margin between slides? - Stack Overflow

programmeradmin0浏览0评论

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 badges
Add a ment  | 

1 Answer 1

Reset to default 5

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);
        });
    })
发布评论

评论列表(0)

  1. 暂无评论