也许我只是太可笑了,这是一件简单的事情,但我正在尝试在使用光滑 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;
}
}
如果有人可以提供帮助,我们将不胜感激!提前致谢!
最佳答案
与其将属性直接应用于 .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我创建是为了让您更好地理解。
关于javascript - 光滑的 slider : adding space in between images shown,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44953253/