jQuery 多行的光滑滑块不起作用

Question

我想要一个基本滑块有两行图像。我正在使用 Slick Slider，但即使我按照他们的说明进行操作，它似乎也无法正常工作。我做错了什么？

这是 link Slick Slider JS 网站： http://kenwheeler.github.io/slick/

我的HTML：

<div class="carousel">
  <img src="https://cdn2.hubspot.net/hub/482618/hubfs/demo-logo.png">
  <img src="https://cdn2.hubspot.net/hub/482618/hubfs/demo-logo.png">
  <img src="https://cdn2.hubspot.net/hub/482618/hubfs/demo-logo.png">
  <img src="https://cdn2.hubspot.net/hub/482618/hubfs/demo-logo.png">
  <img src="https://cdn2.hubspot.net/hub/482618/hubfs/demo-logo.png">
  <img src="https://cdn2.hubspot.net/hub/482618/hubfs/demo-logo.png">
</div>

我的 JS：

$(document).ready(function(){
      $('.carousel').slick({
          dots: true,
          slidesPerRow: 3,
          rows: 2,
          responsive: [
          {
            breakpoint: 1024,
            settings: {
              slidesPerRow: 2,
              rows: 1,
            }
          },
          {
            breakpoint: 640,
            settings: {
              slidesPerRow: 1,
              rows: 1,
            }
          }
        ]
      });
    });

我创建了一个 fiddle： https://jsfiddle.net/zts1nok8/

Answer 1

它确实有效，但您必须正确设置它。

请更改

slidesPerRow: 1

然后重试。

Answer 2

我认为您可以通过包装图像并使用一些简单的方法来达到您想要的效果 CSS。

HTML:

<div class="carousel">
  <div class="carouselItem">
    <img src="https://cdn2.hubspot.net/hub/482618/hubfs/demo-logo.png">
    <img src="https://cdn2.hubspot.net/hub/482618/hubfs/demo-logo.png">
    <img src="https://cdn2.hubspot.net/hub/482618/hubfs/demo-logo.png">
  </div>
  <div class="carouselItem">
    <img src="https://cdn2.hubspot.net/hub/482618/hubfs/demo-logo.png">
    <img src="https://cdn2.hubspot.net/hub/482618/hubfs/demo-logo.png">
    <img src="https://cdn2.hubspot.net/hub/482618/hubfs/demo-logo.png">
  </div>
</div>

CSS:

.carouselItem{
  width:100%;
  text-align:center;
}
.carouselItem img{
  display:inline-block;

}

如果你这样做，你可能想要删除所有关于 slick 配置中的行的东西。老实说，这似乎被窃听了。您可以将问题发送给开发人员。

对于响应度，您可以使用 CSS 媒体查询和 hiding/showing 正确的图像来做一些事情。如果您在每张幻灯片中使用同一张图片三次，这将是最好的。

在此处查看 JSFiddle：https://jsfiddle.net/Chipmo/0u8g9aLt/2/

Answer 3

我想出了一个解决方案，以防将来有人遇到类似问题：

.item img {
  float: left;
  width: 33%;
}


$(document).ready(function(){
      $('.carousel').slick({
          dots: true,
          slidesPerRow: 1,
          rows: 2,
          responsive: [
          {
            breakpoint: 1024,   
            settings: {
              slidesPerRow: 1,
              rows: 1,
            }
          },
          {
            breakpoint: 640,
            settings: {
              slidesPerRow: 1,
              rows: 1,
            }
          }
        ]
      });
    });

https://jsfiddle.net/c5ak1hxz/1/

Answer 4

请尝试更改

slidesPerRow:3

至

slidesToShow:3

并添加

slidesToScroll:3

Answer 5

如果您使用的是 slick slider 版本 1.8.1 并使用 slick.min.js 文件，则将文件替换为 slick.js 文件只是因为 slick.min.js 有一些损坏的代码。
这对我有用

jQuery 多行的光滑滑块不起作用

jQuery slick slider with multiple rows not working

html

javascript

css

jquery

slick.js