如何在Slick轮播项目之间添加空格

我想在两个光滑的轮播项目之间添加空间，但不希望空间有填充，因为它减少了我的元素大小（我不想那样）。

$('.single-item').slick({ initialSlide: 3, infinite: false }); 

 .slick-slider { margin:0 -15px; } .slick-slide { padding:10px; background-color:red; text-align:center; margin-right:15px; margin-left:15px; } 

      
 
 
 
 
1
 
2
 
3
 
4
 
5
 
6
 
 
 
  

不知何故，我从两边获得空间，我试图删除它。

Answer 1

  /* the slides */ .slick-slide { margin: 0 27px; } /* the parent */ .slick-list { margin: 0 -27px; } 

这个问题在插件的github上报告为问题（＃582），顺便提一下这个解决方案，（ https://github.com/kenwheeler/slick/issues/582 ）

Answer 2

@Dishan TD的答案很好，但是我只使用margin-left获得了更好的结果。

为了让其他人更清楚，你必须注意两个相反的数字：27和-27

  /* the slides */ .slick-slide { margin-left:27px; } /* the parent */ .slick-list { margin-left:-27px; } 

Answer 3

在伪类的帮助下，从第一个和最后一个子节点中删除了边距，并在脚本中使用了自适应高度 true。 试试这个小提琴

还有一个Demo

  $('.single-item').slick({ initialSlide: 3, infinite: false, adaptiveHeight: true }); 

Answer 4

是的，我找到了dis问题的解决方案。

• 创建一个从两侧带有额外宽度的滑块框 （我们可以使用它从两侧添加项目空间）。
• 从两侧创建具有适当宽度和边距的内部项目内容 （这应该是您的实际包装尺寸）
• 完成

Answer 5

加

 centerPadding: '0' 

滑块设置如下：

 $('.phase-slider-one').slick({ centerMode: true, centerPadding: '0', responsive: [{breakpoint: 1024,},{breakpoint: 600,},{breakpoint: 480,}] }); 

谢谢

Answer 6

只需修复cs​​s：

 /* the slides */ .slick-slider { overflow: hidden; } /* the parent */ .slick-list { margin: 0 -9px; } /* item */ .item{ padding: 0 9px; } 

Answer 7

尝试使用伪类，例如：first-child＆：last-child，从第一个和最后一个孩子中删除额外的填充。

检查生成的光滑滑块代码并尝试删除其上的填充。

希望，它会有所帮助！

Answer 8

如果你想在幻灯片之间留出更大的空间+不要减小幻灯片的宽度，这意味着你必须显示更少的幻灯片。 在这种情况下，只需添加一个设置以显示更少的幻灯片

  $('.single-item').slick({ initialSlide: 3, infinite: false, slidesToShow: 3 }); 

另一种选择是通过css定义幻灯片的宽度，而不设置要显示的幻灯片数量。

Answer 9

例如：将此data-attr添加到主要slick div：data-space =“7”

  $('[data-space]').each(function () { var $this = $(this), $space = $this.attr('data-space'); $('.slick-slide').css({ marginLeft: $space + 'px', marginRight: $space + 'px' }); $('.slick-list').css({ marginLeft: -$space + 'px', marginRight: -$space/2 + 'px' }) }); 

Answer 10

从最新版本开始，您可以简单地为您的滑动添加margin ：

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

不需要任何负余量，因为光滑的计算是基于元素outterHeight 。

Answer 11

光滑的幻灯片有内包装div，您可以使用它来创建幻灯片之间的间距而不会破坏设计：

 .slick-list {margin: 0 -5px;} .slick-slide>div {padding: 0 5px;}