问题描述
如何限制滑块。例如,如果数据库包含超过 14 个图像,则 slick 总共只会显示不超过 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
}
}
]
});
解决方法
限制是你自己做的。 如果您在漂亮的网站上看到示例
<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;
并通过 php 为每个循环动态生成您的 div(您的内容)。
无需数据库,只需在前端与 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()
}
});
看我的小提琴:manually