在一页上使用多个Slick幻灯片

问题描述

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

这是我的问题： 在我的主页上，我使用Slick制作了3个滑块，它们完全相同。当我只放入一个时，效果很好。但是，一旦我将它们复制为3个滑条，这些滑条和箭头便不再起作用，而是在另一个滑条上起作用。

所以我的问题是如何分别使用3个滑块？

这是我的HTML

<div class="page-wrapper">
    <div class="post-slider">
        <h2 class="slider-title">Activités aquatiques</h2>
        <i class="fas fa-chevron-left prev"></i>
        <i class="fas fa-chevron-right next"></i>

        <div class="post-wrapper">
            <div class="post">
                <h3>Jet-ski</h3>
                <img src="" alt="" class="slider-image" />
                <div class="post-info">
                    <p>
                        Lorem ipsum dolor sit amet consectetur,adipisicing elit. Molestias,officiis dolore labore ipsa perspiciatis inventore eos,ex laborum quis,veniam repellat nobis voluptatibus consequuntur modi nam debitis?
                        Necessitatibus,ea voluptate?
                    </p>
                </div>
            </div>

            <div class="post">
                <h3>Jet-ski</h3>
                <img src="" alt="" class="slider-image" />
                <div class="post-info">
                    <p>
                        Lorem ipsum dolor sit amet consectetur,ea voluptate?
                    </p>
                </div>
            </div>

            <div class="post">
                <h3>Jet-ski</h3>
                <img src="" alt="" class="slider-image" />
                <div class="post-info">
                    <p>Lorem ipsum dolor sit amet consectetur,officiis dolore</p>
                </div>
            </div>

            <div class="post">
                <h3>Jet-ski</h3>
                <img src="" alt="" class="slider-image" />
                <div class="post-info">
                    <p>Lorem ipsum dolor sit amet consectetur,officiis dolore</p>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="page-wrapper">
    <div class="post-slider">
        <h2 class="slider-title">Activités aquatiques</h2>
        <i class="fas fa-chevron-left prev"></i>
        <i class="fas fa-chevron-right next"></i>

        <div class="post-wrapper">
            <div class="post">
                <h3>Jet-ski</h3>
                <img src="" alt="" class="slider-image" />
                <div class="post-info">
                    <p>
                        Lorem ipsum dolor sit amet consectetur,officiis dolore</p>
                </div>
            </div>
        </div>
    </div>
</div>

这是我的JS：

$('.post-wrapper').slick({
    slidesToShow: 3,slidesToScroll: 1,autoplay: false,nextArrow: $('.next'),prevArrow: $('.prev'),});

谢谢。

解决方法

这应该有效：

用ID替换类选择器.post-wrapper：

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

请注意，您需要为每个幻灯片放映单独的幻灯片。 （现在，您甚至可以为每个选项设置不同的选项，是的！）

不要忘记分配这些ID：

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

对您进行网络开发的最大祝愿：-）

,

我找到了问题。

我不得不更改<i>上的.next和.prev类，并在每个滑块上放置不同的名称，并在js中进行相同的操作。

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

});