Javascript 在一页上使用多个光滑的幻灯片

我是一个网络开发的初学者，作为我年终项目的一部分，我必须创建一个网站

我的问题是： 在我的主页上，我用Slick制作了3个滑块，它们完全相同。当我只放了一个的时候，效果很好。但一旦我复制了3个滑块，滑块和箭头就不再工作，而是在另一个滑块上工作

所以我的问题是，我怎样才能单独使用我的3个滑块

这是我的HTML

水上活动
摩托艇

Lorem ipsum dolor坐在amet Concertetur，告别精英。Molestias，officiis dolore Laborare ipsa perspiciatis inventore eos，ex Laboraum quis，veniam repellat nobis Volupatibus Consequintur modi nam debitis？
必要性，是吗？

摩托艇

Lorem ipsum dolor坐在amet Concertetur，告别精英。Molestias，officiis dolore Laborare ipsa perspiciatis inventore eos，ex Laboraum quis，veniam repellat nobis Volupatibus Consequintur modi nam debitis？
必要性，是吗？

摩托艇

Lorem ipsum dolor坐在amet Concertetur，告别精英。Molestias，officiis dolore Laborare ipsa perspiciatis inventore eos，ex Laboraum quis，veniam repellat nobis Volupatibus Consequintur modi nam debitis？
必要性，是吗？

摩托艇
Lorem ipsum dolor坐在amet Concertetur，告别精英。莫莱斯蒂亚斯，多洛

摩托艇
Lorem ipsum dolor坐在amet Concertetur，告别精英。莫莱斯蒂亚斯，多洛

水上活动
摩托艇

Lorem ipsum dolor坐在amet Concertetur，告别精英。Molestias，officiis dolore Laborare ipsa perspiciatis inventore eos，ex Laboraum quis，veniam repellat nobis Volupatibus Consequintur modi nam debitis？
必要性，是吗？

摩托艇

Lorem ipsum dolor坐在amet Concertetur，告别精英。Molestias，officiis dolore Laborare ipsa perspiciatis inventore eos，ex Laboraum quis，veniam repellat nobis Volupatibus Consequintur modi nam debitis？
必要性，是吗？

摩托艇

Lorem ipsum dolor坐在amet Concertetur，告别精英。Molestias，officiis dolore Laborare ipsa perspiciatis inventore eos，ex Laboraum quis，veniam repellat nobis Volupatibus Consequintur modi nam debitis？
必要性，是吗？

摩托艇
Lorem ipsum dolor坐在amet Concertetur，告别精英。莫莱斯蒂亚斯，多洛

摩托艇
Lorem ipsum dolor坐在amet Concertetur，告别精英。莫莱斯蒂亚斯，多洛

这是我的JS：

$（'.post wrapper'）。光滑({
幻灯片放映：3，
幻灯片滚动：1，
自动播放：错误，
下一行：$（'.next'），
prevArrow:$（'.prev'），
});

谢谢。

这应该可以：

用ID替换类选择器

。post wrapper

：

$('#slideshow1').slick({...});
$('#slideshow2').slick({...});
$('#slideshow3').slick({...});

请注意，您需要为每个幻灯片放映调用单独的slick。（现在你甚至可以为每个人设置不同的灵活选项，耶！）

不要忘记分配这些ID：

<div class="post-wrapper" id="slideshow1"> ... </div>
<div class="post-wrapper" id="slideshow2"> ... </div>
<div class="post-wrapper" id="slideshow3"> ... </div>

。。。
... 
... 

祝您在网络开发方面一切顺利：-）

我发现了问题所在

我必须更改

上的.next和.prev类，在每个滑块上放置不同的名称，并在js中执行相同的操作

$('#slideshow1').slick({
    slidesToShow: 3,
    slidesToScroll: 1,
    autoplay: false,
    nextArrow: $('.next1'),
    prevArrow: $('.prev1'),
  });   
  
  $('#slideshow2').slick({
    slidesToShow: 3,
    slidesToScroll: 1,
    autoplay: false,
    nextArrow: $('.next2'),
    prevArrow: $('.prev2'),
  });   
  
  $('#slideshow3').slick({
    slidesToShow: 3,
    slidesToScroll: 1,
    autoplay: false,
    nextArrow: $('.next3'),
    prevArrow: $('.prev3'),
  });  

});

---

这回答了你的问题吗？你检查过这个了吗？哦，对不起，我是新来的。我在.post wrapper上更改了id，现在我有了3张幻灯片，但当我单击第1、第2和第3张幻灯片的箭头时，它只在第3张幻灯片上起作用。看，这位圆滑的开发人员在一个页面上有几十张幻灯片：我建议你检查他的HTML和JS源代码，找出你和他的之间的差异。你的页面可以公开访问吗？然后，请随意共享URL:-）