Question

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

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>

不知怎的，我从两边获得了空间，我试图将其删除。

Answer 1

/tmp/ccgtX1Xs.o: In function `main':
hello.cpp:(.text+0xa): undefined reference to `std::cout'
hello.cpp:(.text+0xf): undefined reference to `std::basic_ostream<char, std::char_traits<char> >& std::operator<< <std::char_traits<char> >(std::basic_ostream<char, std::char_traits<char> >&, char const*)'
/tmp/ccgtX1Xs.o: In function `__static_initialization_and_destruction_0(int, int)':
hello.cpp:(.text+0x3d): undefined reference to `std::ios_base::Init::Init()'
hello.cpp:(.text+0x4c): undefined reference to `std::ios_base::Init::~Init()'
collect2: error: ld returned 1 exit status
g@GME5420:~/cpp$

这个问题在插件的github上报告为问题（＃582），顺便提一下这个解决方案，（https://github.com/kenwheeler/slick/issues/582）

Answer 2

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

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

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

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

Answer 3

修复css：

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

Answer 4

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

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

Answer 5

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

又一个Demo

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

Answer 6

添加

centerPadding: '0'

滑块设置如下：

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

谢谢

Answer 7

从最新版本开始，您只需将margin添加到您的幻灯片中：

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

不需要任何负余量，因为光滑的计算基于元素outterHeight。

Answer 8

尝试使用伪类：first-child＆amp; ：last-child从第一个和第一个删除额外的填充最后一个孩子。

检查生成的光滑滑块代码＆amp;尝试删除那个填充。

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

Answer 9

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

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

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

Answer 10

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

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

Answer 11

例如：将此data-attr添加到您的主要光滑div：data-space =＆＃34; 7＆＃34;

> # Ex 4.4
> out<-c(1,1,1)
> Ab<-function(A,b) {
+   for(i in 1:dim(A)[1]) {
+     
+       out[i]=sum(A[i,]*b)
+   }
+     out
+ }
> a = c(1,1,1)
> A
     [,1] [,2] [,3]
[1,]    1    4    7
[2,]    2    5    8
[3,]    3    6   10
> a
[1] 1 1 1
> Ab(A,a)
[1] 12 15 19

Answer 12

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

SELECT * FROM master.sys.databases

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

Answer 13

只需在光滑侧类上添加填充

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

Answer 14

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

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

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

14 个答案: