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

Question

我想在两个光滑的旋转木马项目之间添加 space，但不想要带填充的 space，因为它会减小我的元素大小（我不希望那样）。

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

不知怎么的，我从两边都得到了 space，我正在尝试删除它。

Answer 1

尝试使用像 :first-child & :last-child 这样的伪类来删除第一个和最后一个 child.

的额外填充

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

希望，它会有所帮助！！！

Answer 2

借助伪类删除了第一个和最后一个 child 的边距，并使用了 adaptive height true in the script. Try this fiddle

再来一个Demo

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

Answer 3

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

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

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

Answer 4

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

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

Answer 5

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

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

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

Answer 6

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

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

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

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

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

Answer 8

添加

centerPadding: '0'

滑块设置如下所示：

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

谢谢

Answer 9

自最新版本以来，您只需在幻灯片中添加 margin：

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

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

Answer 10

只需修正 css:

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

Answer 11

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

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

Answer 12

基于 Dishan TD post 的改进（也删除了垂直边距）：

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

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

注意：在我的例子中 pointer-events 是必需的，以便能够单击向左的箭头。

Answer 13

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

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

Answer 14

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

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

Answer 15

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

Answer 16

屏幕屏幕
data-sm、data-md、data-lg、data-xl、data-xxl 和默认屏幕尺寸 data-default

至space项之间使用space=10，这里10是以“em”为单位的大小

eg: 我设置了space从小屏到中屏2，从大屏到特大屏我设置了space5data-default="[space=2]" data-xl="[space=5]"

注意: data-default="[space=1]" 这些属性只能在"your-slick-slider-class"中设置

Javascript代码

function slickSpacing(space, self){
    self.find('.slick-slide').css({
        marginLeft: space + 'em',
        marginRight: space + 'em'
    });
    self.find('.slick-list').css({
        marginLeft: -space + 'em',
        marginRight: -space/2 + 'em'
    });
}
function slickSlider(){
    $('.slick-slider').each(function () {
        var self = $(this);
        // var screenSize = String(self.attr('data-md')).match(/screen=([0-9]+)/);
        var spaceDefaultSize = String(self.attr('data-default')).match(/space=([0-9]+)/);
        var spaceSmSize = String(self.attr('data-sm')).match(/space=([0-9]+)/);
        var spaceMdSize = String(self.attr('data-md')).match(/space=([0-9]+)/);
        var spaceLgSize = String(self.attr('data-lg')).match(/space=([0-9]+)/);
        var spaceXlSize = String(self.attr('data-xl')).match(/space=([0-9]+)/);
        var spaceXxlSize = String(self.attr('data-xxl')).match(/space=([0-9]+)/);
        if(String(spaceDefaultSize) !== "null"){
            if($(window).innerWidth() >= 0){
                slickSpacing(spaceDefaultSize[1], self)
            }
        }
        if(String(spaceSmSize) !== "null"){
            if($(window).innerWidth() >= 576){
                slickSpacing(spaceSmSize[1], self)
            }
        }
        if(String(spaceMdSize) !== "null"){
            if($(window).innerWidth() >= 768){
                slickSpacing(spaceMdSize[1], self)
            }
        }
        if(String(spaceLgSize) !== "null"){
            if($(window).innerWidth() >= 992){
                slickSpacing(spaceLgSize[1], self)
            }
        }
        if(String(spaceXlSize) !== "null"){
            if($(window).innerWidth() >= 1200){
                slickSpacing(spaceXlSize[1], self)
            }
        }
        if(String(spaceXxlSize) !== "null"){
            if($(window).innerWidth() >= 1400){
                slickSpacing(spaceXxlSize[1], self)
            }
        }
    });
}
$(window).on('resize load', function(){
    slickSlider();
});

HTML代码

<div class="service-slider overflow-hidden" data-default="[space=1]" data-xl="[space=5]">
    <div></div>
    <div></div>
    <div></div>
</div>

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

How add spaces between Slick carousel item

jquery

html

css

jquery-plugins

slick.js