Slick Carousel - 在移动设备上幻灯片中的 5 个项目到 1 个项目

Question

在我的 slickCarousel 的每个“幻灯片”中，我展示了 5 张卡片（在桌面上）。然而，在移动设备上，我需要第一张卡片作为幻灯片一张，第二张卡片作为幻灯片 2 等等。

http://kenwheeler.github.io/slick/#settings

桌面

<slide 1>
 [1][2]
[3][4][5]
</slide 1>
<slide 2>
 [6][7]
[8][9][10]
</slide 2>

我目前在移动设备上也有什么

<slide 1>
 [1][2]
[3][4][5]
</slide 1>
<slide 2>
 [6][7]
[8][9][10]
</slide 2>

我在移动设备上需要什么

<slide 1>
 [1]
</slide 1>
<slide 2>
 [2]
</slide 2>
<slide 3>
 [3]
</slide 3>
<slide 4>
 [4]
</slide 4>
<slide 5>
 [5]
</slide 5>
<slide 6>
 [6]
</slide 6>
<slide 7>
 [7]
</slide 7>
<slide 8>
 [8]
</slide 8>
<slide 9>
 [9]
</slide 9>
<slide 10>
 [10]
</slide 10>

JSFiddle https://jsfiddle.net/tr0pec2m/

    $(function () {
      $(".regular").slick({
        dots: true,
        infinite: false,
        slidesToShow: 1,
        slidesToScroll: 1
      });
    });

    html, body {
      margin: 0;
      padding: 0;
    }

    * {
      box-sizing: border-box;
    }

    .slider {
      width: 50%;
      margin: 25px auto;
    }

    .slick-slide {
      margin: 0px 20px;
    }

      .slick-slide img {
        border: 1px solid #000;
      }

    .slick-prev:before,
    .slick-next:before {
      color: black;
    }

    .hidde-sldie img {
      border: 5px solid red;
    }

    .show-hide-slide-btn {
      text-align: center;
      margin: 0 auto;
      display: block;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://rawgit.com/kenwheeler/slick/master/slick/slick-theme.css" rel="stylesheet"/>
<link href="https://rawgit.com/kenwheeler/slick/master/slick/slick.css" rel="stylesheet"/>
<script src="https://rawgit.com/kenwheeler/slick/master/slick/slick.js"></script>
  <section class="regular slider">
    <div>
      <img src="http://placehold.it/150x100?text=1">
      <img src="http://placehold.it/150x100?text=2">
      <img src="http://placehold.it/150x100?text=3">
      <img src="http://placehold.it/150x100?text=4">
      <img src="http://placehold.it/150x100?text=5">
    </div>
    <div>
      <img src="http://placehold.it/150x100?text=6">
      <img src="http://placehold.it/150x100?text=7">
      <img src="http://placehold.it/150x100?text=8">
      <img src="http://placehold.it/150x100?text=9">
      <img src="http://placehold.it/150x100?text=10">
    </div>
  </section>

响应式设置不是我这里需要的，响应式设置将处理要出现的幻灯片的数量。目前，就 slickCarousel 所知，我只有一张幻灯片，里面有多个项目。

我需要将卡片拆分成多张幻灯片，以便 Slick 可以处理所有 10 张幻灯片。

Answer 1

如果可能，将所有滑块项添加为直接子项并使用光滑滑块的响应式配置

  $(".regular").slick({
    dots: true,
    infinite: false,
    vertical: true,
    slidesToShow: 5,
    slidesToScroll: 5,
    responsive: [
      {
        breakpoint: 500,
        settings: {
        slidesToShow: 1,
        slidesToScroll: 1,
        }
      }
    ]        
  });

https://jsfiddle.net/tr0pec2m/2/

Answer 2

You Have to change HTML strcture, and add js parameter

  <section class="regular slider">
      <img src="https://placehold.it/150x100?text=1">
      <img src="https://placehold.it/150x100?text=2">
      <img src="https://placehold.it/150x100?text=3">
      <img src="https://placehold.it/150x100?text=4">
      <img src="https://placehold.it/150x100?text=5">
      <img src="https://placehold.it/150x100?text=6">
      <img src="https://placehold.it/150x100?text=7">
      <img src="https://placehold.it/150x100?text=8">
      <img src="https://placehold.it/150x100?text=9">
      <img src="https://placehold.it/150x100?text=10">
  </section>


 $(function () {
      $(".regular").slick({
        dots: true,
        infinite: false,
        slidesToShow: 1,
        slidesToScroll: 1,
         responsive: [
            {
              breakpoint: 1000,
              settings: {
                slidesToShow: 6,
                slidesToScroll: 1
              }
            },
            {
              breakpoint: 800,
              settings: {
                slidesToShow: 3,
                slidesToScroll: 1
              }
            },
            {
              breakpoint: 500,
              settings: {
                slidesToShow: 1,
                slidesToScroll: 1
              }
            }                
           ]
      });
    });