我需要制作一个从左到右顺序的两行轮播(也是响应式的)
与:
$('slider').slick({
rows: 2,
slidesToShow: 3,
responsive: [
{
breakpoint: 768,
settings: {
slidesToShow: 1
}
}
]
});
我得到这个命令:
1 3 5 7 9 11
2 4 6 8 10 12
此解决方案对我不利,因为我使用 1 张幻灯片以响应模式显示:How can I create a carousel with multiple rows?
有什么想法吗?
最佳答案
你需要这样的东西 模板:
<div class="carousel">
<div class=""><img src="/images/app.png" alt=""></div>
<div class=""><img src="/images/app.png" alt=""></div>
<div class=""><img src="/images/app.png" alt=""></div>
<div class=""><img src="/images/app.png" alt=""></div>
<div class=""><img src="/images/app.png" alt=""></div>
<div class=""><img src="/images/app.png" alt=""></div>
<div class=""><img src="/images/app.png" alt=""></div>
<div class=""><img src="/images/app.png" alt=""></div>
<div class=""><img src="/images/app.png" alt=""></div>
<div class=""><img src="/images/app.png" alt=""></div>
<div class=""><img src="/images/app.png" alt=""></div>
<div class=""><img src="/images/app.png" alt=""></div>
</div>
CSS:
.slick-slide{
img{
width: 100%;
}
}
JS:
$('.carousel').slick({
dots: true,
slidesPerRow: 3,
rows: 2,
responsive: [
{
breakpoint: 478,
settings: {
slidesPerRow: 1,
rows: 1,
}
}
]
});
这对我有用。
如果你只想在移动设备上显示一行,你应该这样做,
您必须更改 slick.js 中的一些代码,因此您必须使用未缩小的 js 版本来执行此操作。所以,在slick.js中找到这两个方法:
- Slick.prototype.buildRows = function() { ... }
- Slick.prototype.cleanUpRows = function() { ... }
并将 if 条件从 if(.options.rows > 1) 更改为 if(.options.rows > 0)
这是一种解决当前 slick-carousel 问题的方法。
关于javascript - 从左到右两排光滑的旋转木马,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33800622/