Question

也许我只是荒谬而且这是一件简单的事情，但我试图在使用光滑滑块显示的图像之间添加间距。

JS

$('.slider').slick({ 
    infinite: true, 
    speed: 700, 
    arrows: true, 
    slidesToShow: 2, 
    slidesToScroll: 2, 
    dots: false, 
    responsive: [ { settings: "unslick" ## Heading ##}, ] 
});

我尝试用css添加空间：

.slick-slide { 
    &:nth-of-type(odd){ 
        padding-left:0px; 
        padding-right:100px; 
    } 
    &:nth-of-type(even){ 
        padding-right:0px; 
        padding-left:100px; 
    } 
}

如果有人可以提供帮助，我们将不胜感激！提前谢谢！

Answer 1

您应该更喜欢将属性应用于子元素，而不是直接将属性应用于.slick-slide选择器。

例如，如果是HTML代码，

<div class="slider">
    <div><h3>1</h3></div>
    <div><h3>2</h3></div>
    <div><h3>3</h3></div>
</div>

那么SASS应该是，

.slick-slide { 
  h3{
    background: red;
    color: white;
    font-size: 36px;
    line-height: 100px;
    margin: 10px;
    padding: 2%;
    position: relative;
    text-align: center;
  }
}

请注意，此处的margin会导致所需的间距。查看我为您创建的codepen以便更好地理解。

Answer 2

这应该可行，因为在屏幕上以属性data-slick-index="0"的数据开始滑动第一个项目为0

.slick-slide {
   margin-left:20px;
}

.slick-list [data-slick-index="0"] {
    margin-left: 0;
  }

光滑滑块：在显示的图像之间添加空间

2 个答案: