光滑的滑块:在显示的图像之间添加空间
Posted
技术标签:
【中文标题】光滑的滑块:在显示的图像之间添加空间【英文标题】:Slick slider: adding space in between images shown 【发布时间】:2017-12-10 17:13:18 【问题描述】:也许我只是在开玩笑,这是一件简单的事情,但我正在尝试在使用光滑滑块显示的图像之间添加间距。
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;
如果有人可以提供帮助,将不胜感激!提前致谢!
【问题讨论】:
请正确格式化您的代码。 【参考方案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,以便您更好地了解。
【讨论】:
【参考方案2】:这应该可以工作,因为屏幕上的第一个项目的属性 data-slick-index="0"
数据为 0
.slick-slide
margin-left:20px;
.slick-list [data-slick-index="0"]
margin-left: 0;
【讨论】:
以上是关于光滑的滑块:在显示的图像之间添加空间的主要内容,如果未能解决你的问题,请参考以下文章