Javascript 滑动传送带-移动设备上从幻灯片中的5个项目到1个项目

在滑溜转盘的每个“幻灯片”中，我都会显示5张卡片（在桌面上）。然而，在手机上，我需要第一张卡片作为幻灯片1，第二张卡片作为幻灯片2等等

桌面

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

html，正文{
保证金：0；
填充：0；
}
* {
框大小：边框框；
}
.滑块{
宽度：50%；
保证金：25像素自动；
}
.滑滑梯{
利润率：0px 20px；
}
.滑溜式img{
边框：1px实心#000；
}
.史莱克·普雷夫：之前，
.滑头下一个：之前{
颜色：黑色；
}
hidde sldie先生{
边框：5px纯红；
}
.显示隐藏幻灯片btn{
文本对齐：居中；
保证金：0自动；
显示：块；
}

---

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

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

您必须更改HTML结构，并添加js参数
$（函数（）{
美元（“.regular”）。光滑({
点：是的，
无限：错，
幻灯片放映：1，
幻灯片滚动：1，
响应：[
{
断点：1000，
设置：{
幻灯片放映：6，
幻灯片滚动：1
}
},
{
断点：800，
设置：{
幻灯片放映：3，
幻灯片滚动：1
}
},
{
断点：500，
设置：{
幻灯片放映：1，
幻灯片滚动：1
}
}                
]
});
});

在这种情况下，您必须创建两个不同的滑块，一个用于移动视图，另一个用于桌面视图。如前所述，每个“幻灯片”中都有多个项目。响应设置将处理要显示的幻灯片数量。目前，据slickCarousel所知，我只有两张幻灯片，里面有多个项目。是否可以将所有幻灯片分别放在一个分区中？

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

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

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