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

【问题标题】：jQuery slick slider with multiple rows not working多行的jQuery光滑滑块不起作用
【发布时间】：2022-02-10 14:25:39
【问题描述】：

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

这是 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,
            }
          }
        ]
      });
    });

我创建了一个小提琴： https://jsfiddle.net/zts1nok8/

【问题讨论】：

标签： javascript jquery html css slick.js

【解决方案1】：

我认为你可以通过包装图片并使用一些简单的 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 媒体查询和隐藏/显示正确的图像来做一些事情。如果您只在每张幻灯片中使用 3 次相同的图像，这将最有效。

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

请更换

slidesPerRow: 1

然后再试一次。

【讨论】：

好的，谢谢，但我希望每行三张幻灯片并排显示，类似于此页面中的轮播：optimizely.com/resources/testing-toolkit

【解决方案4】：

请尝试更改

slidesPerRow:3

到

slidesToShow:3

并添加

slidesToScroll:3

【讨论】：

【解决方案5】：

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

.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/

【讨论】：