解释
我正在使用 Ken Wheeler 的插件，Slick ，为了创建这个轮播，但由于某种原因，里面的图片<a>标签之间的距离不相等；其中一些甚至重叠。有什么可以解决的吗？
代码
$('.carousel').slick({
arrows: false,
autoplay: true,
autoplaySpeed: 1000,
slidesToShow: 5,
slidesToScroll: 1,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 4
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 2
}
}
]
});.container {
margin: 0 auto;
padding: 40px;
width: 80%;
background: #419be0;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css">
</head>
<body>
<div class='container'>
<div class='carousel'>
<div>
<a href="#"><img src="http://i.imgur.com/kkVWQR4.jpg" alt=""></a>
</div>
<div>
<a href="#"><img src="http://i.imgur.com/RRWm3lB.jpg" alt=""></a>
</div>
<div>
<a href="#"><img src="http://i.imgur.com/2f2pUHi.jpg" alt=""></a>
</div>
<div>
<a href="#"><img src="http://i.imgur.com/7TSiIkS.jpg" alt=""></a>
</div>
<div>
<a href="#"><img src="http://i.imgur.com/dXxnAnC.jpg" alt=""></a>
</div>
<div>
<a href="#"><img src="http://i.imgur.com/kkVWQR4.jpg" alt=""></a>
</div>
<div>
<a href="#"><img src="http://i.imgur.com/RRWm3lB.jpg" alt=""></a>
</div>
<div>
<a href="#"><img src="http://i.imgur.com/2f2pUHi.jpg" alt=""></a>
</div>
<div>
<a href="#"><img src="http://i.imgur.com/7TSiIkS.jpg" alt=""></a>
</div>
<div>
<a href="#"><img src="http://i.imgur.com/dXxnAnC.jpg" alt=""></a>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
</body>
</html>提前致谢，
路易斯。
最佳答案
$('.carousel').slick({
variableWidth: true,
...
});
variableWidth 允许使用不同宽度的幻灯片。
要通过 css 在幻灯片之间添加空间，您可以使用:
.slick-slide {margin-right: 20px;}
关于javascript - Slick 的轮播图片之间的空间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42138140/