Question

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

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

问题在于设置幻灯片之间的边距。我发现How add spaces between Slick carousel item解释了你可以用这种方式修改保证金：

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

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

但是，我无法将保证金更改为负值，因此第3个元素将位于两个之上而不是仅位于它们之间。

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

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

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

1 个答案: