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

Question

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

这是我的问题： 在我的主页上，我有 3 个使用 Slick 制作的滑块，它们完全相同。当我只放一个时，它工作得很好。但是，一旦我复制它们以拥有我的 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, 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, 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, adipisicing elit. Molestias, 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, adipisicing elit. Molestias, 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, 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, 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, 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, adipisicing elit. Molestias, 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, adipisicing elit. Molestias, officiis dolore</p>
                </div>
            </div>
        </div>
    </div>
</div>

这是我的 JS：

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

谢谢。

Answer 1

这应该可行：

将类选择器.post-wrapper替换为id：

$('#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>

祝您网络开发 :-)

Answer 2

我找到了问题。

我不得不更改 <i> 上的 .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'),
  });  

});