javascript - 具有多行的 jQuery 光滑 slider 不起作用

Question

我想为基本 slider 设置两行图像。我正在使用 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,
            }
          }
        ]
      });
    });

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

Answer 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 媒体查询和隐藏/显示正确的图像来做一些事情。如果您在每张幻灯片中使用同一张图片三次，这种方法效果最好。

在这里查看 JSFiddle:https://jsfiddle.net/Chipmo/0u8g9aLt/2/