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

Question

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

104

我想在两个Slick Carousel项之间添加空间，但不想使用填充的空间，因为它会减小我的元素大小（我不想要那个）。

我想在两个Slick Carousel项之间添加空间，但不希望使用padding的方式，因为这会缩小我的元素大小（而我不希望出现这种情况）。

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>

我两边都有空格，想要去掉。

- Sopo

2

你需要在两端添加或删除空格。 - stanze

2

你后来解决了这个问题吗？我也遇到了同样的问题。 - aslamdoctor

18个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Krzysztof · Answer 1

例如：将此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'
                        })
                    });

- M Jos · Answer 2

添加

centerPadding: '0'

滑块设置将如下所示：

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

谢谢您。

- Asaf David · Answer 3

如果您想在幻灯片之间增加更大的间距，而不减小幻灯片的宽度，那么就意味着您需要显示更少的幻灯片。在这种情况下，只需添加一个设置来显示较少的幻灯片即可。

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

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

- Hoang Long · Answer 4

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

- Mohammed Rashad · Answer 5

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

要在项目之间添加空格，请使用 space=10，这里的 10 是“em”中的大小

例如：我将空格从小屏幕设置为中等屏幕 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>

- bprdev · Answer 6

你可以通过为幻灯片项添加边框来模仿它。不是通过覆盖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;
    }
}

- Pilot Tt · Answer 7

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

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

- Manish Kumar · Answer 8

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

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

希望这能有所帮助！