jQuery 如何在 Slick carousel item 之间添加空格

How add spaces between Slick carousel item

提问by Sopo

I want to add space between two slick carousel items, but not want the space with padding, because it's reducing my element size(and I don't want that).

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

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

Somehow I am getting space from both side, I am trying to remove that.

不知何故，我从两侧获得了空间，我正试图将其移除。

采纳答案by Sopo

Yup, I have found the solution for dis issue.

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

• Create one slider box with extra widthfrom both side( Which we can use to add item space from both sides ).
• Create Inner Item Contentwith proper width & margin from both sides( This should be your actual wrapper size )
• Done

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

回答by Dishan TD

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

This problem reported as issue (#582) on plugin's github, btw this solution mentioned there too, (https://github.com/kenwheeler/slick/issues/582)

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

回答by Pablo S G Pacheco

@Dishan TD's answer works nice, but I'm getting better results using only margin-left.

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

And to make this clearer to everyone else, you have to pay attention to the both opposite numbers: 27 and -27

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

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

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

回答by Sushil Thapa

The slick-slide has inner wrapping div which you can use to create spacing between slides without breaking the design:

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

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

回答by Orlandster

Since the latest versions you can simply add a marginto your slides:

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

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

There's no need for any kind of negative margins, since slick's calculation is based on the elements outerHeight.

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

回答by Anh Hoai Vui Le

Just fix css:

只需修复cs​​s：

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

回答by ling

An improvement based on the post by Dishan TD (which removes the vertical margin as well):

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

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

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

Note: the pointer-events was necessary in my case, to be able to click on the left arrow.

注意：就我而言，指针事件是必要的，以便能够单击左箭头。

回答by MJ Mikz

Add

添加

centerPadding: '0'

Slider settings will look like:

滑块设置将如下所示：

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

Thank you

谢谢

回答by stanze

With the help of pseudo classes removed margins from first and last child, and used adaptive heighttrue in the script. Try this fiddle

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

One more Demo

再来一个演示

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

回答by Asaf David

If you want a bigger space between the slides + not to decrease the slide's width, it means you'll have to show less slides. In such case just add a setting to show less slides

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

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

Another option is to define a slide's width by css without setting to amount of slides to show.

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