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

Posted 2023-05-07

【中文标题】如何在 Slick 轮播项目之间添加空格

【英文标题】：How add spaces between Slick carousel item

【发布时间】：2015-09-09 00:48:15

【问题描述】：

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

    $('.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;

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://cdn.jsdelivr.net/jquery.slick/1.5.0/slick.min.js"></script>
<link href="http://cdn.jsdelivr.net/jquery.slick/1.5.0/slick.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="container">
    <div class="row">
        <div class="col-sm-12" style="background-color:gray;">
            <div class="slider single-item" style="background:yellow">
                <div>1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
                <div>5</div>
                <div>6</div>
            </div>
        </div>
    </div>
</div>

不知何故，我从两侧获得了空间，我正在尝试删除它。

【问题讨论】：

您需要在两端添加或删除空间。

如图所示。我想要从第一项右侧到右侧图像左侧的空间，而不是起点和终点

你后来有没有解决这个问题？我也面临同样的问题。

【参考方案1】：

  /* the slides */
  .slick-slide 
      margin: 0 27px;
  

  /* the parent */
  .slick-list 
      margin: 0 -27px;
  

这个问题在插件的 github 上报告为问题 (#582)，顺便说一下，这个解决方案也在那里提到，(https://github.com/kenwheeler/slick/issues/582)

【讨论】：

这个解决方案很棒而且会奏效。 （顺便说一句，插件的 github 配置文件中也提到了这个解决方案，请参阅 github.com/kenwheeler/slick/issues/582）

我需要在滑块的容器上放置一个overflow: hidden 以防止由于边距而溢出。

【参考方案2】：

slick-slide 有内部环绕 div，您可以使用它来创建幻灯片之间的间距而不会破坏设计：

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

【讨论】：

它可以工作，但在动画期间幻灯片在滑块之外可见。

使用 React Slick 和 Styled Components 添加了您的建议，并且成功了。

【参考方案3】：

由于是最新版本，您只需在幻灯片中添加 margin：

.slick-slide 
  margin: 0 20px;

不需要任何类型的负边距，因为 slick 的计算基于元素 outerHeight。

【讨论】：

你能确认这是从哪个版本开始的吗？

它可以工作，但它也会在滑块的左右添加 20px 的边距，这不是很好。

【参考方案4】：

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

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

  /* the slides */
  .slick-slide 
    margin-left:27px;
  

  /* the parent */
  .slick-list 
    margin-left:-27px;
  

【讨论】：

我需要在滑块的容器上放置一个overflow: hidden 以防止由于边距而溢出。

【参考方案5】：

基于迪山 TD 的帖子的改进（也删除了垂直边距）：

  .slick-slide
    margin-left:  15px;
    margin-right:  15px;
  

  .slick-list 
    margin-left: -15px;
    margin-right: -15px;
    pointer-events: none;
  

注意：在我的情况下，指针事件是必要的，以便能够单击左箭头。

【参考方案6】：

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

从两侧创建

一个额外宽度的滑块

（我们可以使用它从两侧添加项目空间）。 创建

Inner Item Content

，两侧具有适当的宽度和边距（这应该是您的实际包装尺寸） 完成

【参考方案7】：

只需修复 css：

/* the slides */
.slick-slider 
    overflow: hidden;

/* the parent */
.slick-list 
    margin: 0 -9px;

/* item */  
.item
    padding: 0 9px;

【参考方案8】：

在伪类的帮助下，删除了第一个和最后一个子级的边距，并在脚本中使用了adaptive height true。试试这个fiddle

还有一个Demo

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

【讨论】：

我已经检查了你的两个小提琴，当我改变到下一个项目时，它显示了 first 和 second 的空间。实际上我正在尝试删除可视区域上的空间（边距空间）并将可视部分的全宽用于单个项目

这是正确答案。自适应宽度和高度帮助解决了我的问题。

【参考方案9】：

例如： 将此数据属性添加到您的主要光滑 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'
                        )
                    );

【讨论】：

这是动态改变空间的完美解决方案。我已经测试过了。

【参考方案10】：

添加

centerPadding: '0'

滑块设置如下所示：

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

谢谢

【参考方案11】：

只需在 slick-side 类上添加填充即可

.slick-slider .slick-slide 
  padding: 0 15px;

【参考方案12】：

尝试使用 :first-child 和 :last-child 之类的伪类来删除第一个和最后一个孩子的额外填充。

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

希望对你有帮助！！！

【讨论】：

我已经尝试过了，但它会影响滚动上的下一个项目

如果您将 'inifite' 选项设置为 true，这将不起作用

【参考方案13】：

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

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

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

【参考方案14】：

这种方法适用于最新版本的 react-slick：

  .slick-list 
    margin: 0 -7px !important;
  
  
  .slick-slide > div 
    padding: 0 7px !important;
  

【参考方案15】：

.slick-slide > div 
  margin: 0 10px;

.slick-list 
  margin: 0 -10px;

【讨论】：

您的答案可以通过添加有关代码的作用以及它如何帮助 OP 的更多信息来改进。