Question

如何在#section1中的#section18 - .customer-logos之间指出一致的间距。 .customer-logos中的图片目前仅在#section9 - #section18后间隔不均匀？特别是#section17＆amp; #section18他们重叠的地方。我已经尝试了几件事无法解决，任何帮助都将不胜感激！：）

https://jsfiddle.net/mbj7ckrs/2/

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

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

.slick-slider
{
position: relative;

display: block;
box-sizing: border-box;

-webkit-user-select: none;
   -moz-user-select: none;
    -ms-user-select: none;
        user-select: none;

-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
    touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}

.slick-list
{
position: relative;

display: block;
overflow: hidden;

margin: 0;
padding: 0;
}
.slick-list:focus
{
outline: none;
}
.slick-list.dragging
{
cursor: pointer;
cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
-webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
     -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
}

.slick-track
{
position: relative;
top: 0;
left: 0;

display: block;
}
.slick-track:before,
.slick-track:after
{
display: table;

content: '';
}
.slick-track:after
{
clear: both;
}
.slick-loading .slick-track
{
visibility: hidden;
}

.slick-slide
{
display: none;
float: left;

height: 100%;
min-height: 1px;
}
[dir='rtl'] .slick-slide
{
float: right;
}
.slick-slide img
{
display: block;
}
.slick-slide.slick-loading img
{
display: none;
}
.slick-slide.dragging img
{
pointer-events: none;
}
.slick-initialized .slick-slide
{
display: block;
}
.slick-loading .slick-slide
{
visibility: hidden;
}
.slick-vertical .slick-slide
{
display: block;

height: auto;

border: 1px solid transparent;
}

Answer 1

这是因为您的图像宽度不同。

添加以下属性：

$('.customer-logos').slick({
  variableWidth: true,
  ...
});

如何在光滑的滑块imgs之间设置一致的空间

1 个答案: