Javascript 从左到右两排光滑的旋转木马
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33800622/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Slick carousel in two rows left to right
提问by kurtko
I need to make a two lines carousel with left to right order (also responsive)
我需要制作一个从左到右顺序的两行轮播（也是响应式的）
With:
和：
$('slider').slick({
rows: 2,
slidesToShow: 3,
responsive: [
{
breakpoint: 768,
settings: {
slidesToShow: 1
}
}
]
});
I get this order:
我得到这个命令：
1 3 5 7 9 11
2 4 6 8 10 12
This solution is not good for me because I'm using 1 slides to show in responsive mode: How can I create a carousel with multiple rows?
此解决方案对我不利，因为我使用 1 张幻灯片以响应模式显示：如何创建多行轮播？
Any ideas?
有任何想法吗？
回答by Yoan
You need something like that Template:
你需要这样的模板：
<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:
CSS：
.slick-slide{
img{
width: 100%;
}
}
JS:
JS：
$('.carousel').slick({
dots: true,
slidesPerRow: 3,
rows: 2,
responsive: [
{
breakpoint: 478,
settings: {
slidesPerRow: 1,
rows: 1,
}
}
]
});
that works for me.
这对我行得通。
And if you want to show on mobile only one row, you should do that,
如果你只想在移动设备上显示一行，你应该这样做，
You have to change some code in slick.js so you have to use the not minified js version to do that. So, find these two methods in slick.js:
您必须更改 slick.js 中的一些代码，因此您必须使用未缩小的 js 版本来执行此操作。所以，在 slick.js 中找到这两个方法：
- Slick.prototype.buildRows = function() { ... }
- Slick.prototype.cleanUpRows = function() { ... }
- Slick.prototype.buildRows = function() { ... }
- Slick.prototype.cleanUpRows = function() { ... }
and change the if condition from if(.options.rows > 1) to if(.options.rows > 0)
并将 if 条件从 if( .options.rows > 1) 更改为 if(.options.rows > 0)
It is a way to fix a problem that currently has slick-carousel.
这是一种解决当前具有圆滑轮播问题的方法。
