如何限制滑块。例如，如果数据库包含超过14个图像，滑块将只显示总共不超过14个滑块（按哪个顺序不重要）。则使用断点。
$('.responsive').slick({
dots: true,
infinite: false,
speed: 300,
slidesToShow: 4,
slidesToScroll: 4,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
限制是你造成的。如果你看到slick网站上的例子
<div class="your-class">
<div>your content</div>
<div>your content</div>
<div>your content</div>
</div>
然后初始化滑块
$(document).ready(function(){
$('.your-class').slick({
setting-name: setting-value
});
});
只生成14个条目。所以滑块将只显示14。如果使用数据库查询，请执行
SELECT
image
FROM
imgtable
LIMIT 14;
并为每个循环动态地生成DIV（您的内容），例如通过php。
在没有数据库的情况下，只要在前端使用JQuery就可以使用。
示例内容（超过14个）：
<div class="your-class">
<div class="img">your content</div>
<div class="img">your content</div>
<div class="img">your content</div>
<div class="img">your content</div>
<div class="img">your content</div>
<div class="img">your content</div>
<div class="img">your content</div>
<div class="img">your content</div>
<div class="img">your content</div>
<div class="img">your content</div>
<div class="img">your content</div>
<div class="img">your content</div>
<div class="img">your content</div>
<div class="img">your content</div>
<div class="img">your content</div>
<div class="img">your content</div>
<div class="img">your content</div>
<div class="img">your content</div>
</div>
因此在Jquery中使用
$('.img').each(function(index, value) {
if (index > 13) {
console.log('index', index);
$(this).hide()
}
});
参见我的小提琴:https://jsfidle.net/bogatyr77/9ojvu7lh/23//
