Slick：如何编辑幻灯片之间的边距？

Question

我想知道是否可以使用光滑的滑块创建类似的东西？

  +-------+ +-------+
  |       | |       |
  |    +-------+    |
  +----|       |----+
       |       |
       +-------+

问题在于设置幻灯片之间的边距。我发现如何在 Slick 轮播项目之间添加空格，它解释了您可以通过这种方式修改边距：

/* the slides */
 .slick-slide {
   margin: 0 27px;
 }

/* the parent */
 .slick-list {
   margin: 0 -27px;
 }

但是，我无法将边距更改为负值，以便第三个元素将位于两个元素的顶部而不是仅位于它们之间。

有没有人碰巧这样做过，或者知道任何有类似内容的参考链接？

Answer 1

所以，如果有人仍然感兴趣，我可以通过这种方式得到我想要的东西：

#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;
}

有了这些风格，我就能得到我想要的东西。然而，同级列表中的每张第一张幻灯片仍然显示。因此，我使用了一个脚本，它基本上隐藏了不活动的幻灯片，只显示可见的幻灯片。

    $(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);
        });
    })