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

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;
  

【讨论】:

以上是关于光滑的滑块:在显示的图像之间添加空间的主要内容,如果未能解决你的问题,请参考以下文章

光滑的滑块图像重叠和损坏的按钮

如何在光滑的滑块中创建自定义箭头以在悬停时更改图像?

图像上的 Wordpress ACF 和光滑的滑块链接

光滑的滑块下一个箭头不显示

我如何在光滑的滑块中只显示三张幻灯片?

光滑的滑块拇指没有显示