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

问题描述 投票：0回答：19

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

enter image description here

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

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

jquery html css jquery-plugins slick.js
19个回答
171
投票
  /* the slides */
  .slick-slide {
      margin: 0 27px;
  }

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

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

31
投票

slick-slide 具有内部包裹 div，您可以使用它在幻灯片之间创建间距，而不会破坏设计：

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

从最新版本开始，您只需在幻灯片中添加 

margin
即可：

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

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

outerHeight
。

14
投票

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

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

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

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

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

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

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

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

7
投票

是的，我已经找到了这个问题的解决方案。

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

只需在光滑面类上添加填充即可

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

只需修复CSS：

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

如今，flexbox 的 

gap
属性拥有相当不错的支持：https://caniuse.com/flexbox-gap

所以你可以使用这个：

.slick-track {
    display: flex;
    gap: 1rem;
}

它只会在元素之间添加空间。

2
投票

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

再一个演示

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

例如： 将此数据属性添加到您的主 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'
                        })
                    });
1
投票

添加

centerPadding: '0'

滑块设置如下所示：

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

谢谢你

0
投票

尝试使用伪类，如 :first-child & :last-child 来删除第一个和最后一个子元素的额外填充。

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

希望，它会有所帮助！

0
投票

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

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

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

0
投票

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

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

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

要在项目之间留出空间，请使用 space=10，这里 10 是以“em”为单位的大小

eg：我设置从小屏幕到中屏幕2的空间，从大屏幕到超大屏幕我设置空间5 data-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>
0
投票

您可以通过向幻灯片项目添加边框来伪造它。不是通过覆盖 Slick Slider 样式，而是通过向您创建的将转换为滑块的元素添加边框。像这样的东西：

.my-slide-element {
    &:not(:first-child):not(:last-child) {
        border-left: 2px solid white;
        border-right: 2px solid white;
    }

    &:first-child {
        border-right: 4px solid white;
    }

    &:last-child {
        border-left: 4px solid white;
    }
}
0
投票
.slick-slide {
  margin: 0 10px;
}
.slick-list {
  margin: 0 -10px;
}
0
投票

对我来说，这个对我有帮助。

 .slick-slide {
    margin-left: 5px!important;
    margin-right: 5px!important;
}
.slick-slider {
    padding-left: 5px;
    padding-right: 5px;
  }
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.