Question

我想为基本的滑块添加两行图像。我正在使用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/

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;

}

如果执行此操作，则可能要删除光滑配置中有关行的所有内容。说实话，这似乎有误。您可以将问题发送给开发人员。

出于响应性考虑，您可以对CSS媒体查询和隐藏/显示正确的图像进行某些操作。如果您每张幻灯片仅使用同一图像3次，则效果最好。

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

Answer 2

它实际上正在工作，但是您必须正确设置它。

请更改

strftime

然后重试。

Answer 3

请尝试更改

slidesPerRow:3

到

slidesToShow:3

并添加

slidesToScroll:3

Answer 4

万一将来有人遇到类似的问题，我就能够提出解决方案：

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

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

4 个答案: