javascript - 光滑的 slider : adding space in between images shown

Question

也许我只是太可笑了，这是一件简单的事情，但我正在尝试在使用光滑 slider 显示的图像之间添加间距。

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我创建是为了让您更好地理解。