jquery prevArrow和nextArrow不适用于多个光滑滑块

qojgxg4l 于 2022-12-22 发布在 jQuery

关注(0)|答案(1)|浏览(178)

我的页面上有多个滑块，问题是我创建的自定义箭头只适用于2号滑块，例如，我可以按1号或3号滑块上的箭头，但它会更改2号滑块上的图片。
下面是代码：

**<section id="slideshow">
    <div class="slick">
      <div><img src="pic.jpg" ></div>
      <div><img src="pic2.jpg" ></div>
      <div><img src="pic3.jpg"></div>
    <div>
    <div class="arrow-prev">
       <span><i class="fas fa-angle-double-left"></i></span>
    </div>
    <div class="arrow-next">
       <span><i class="fas fa-angle-double-right"></i></span>
    </div>
</section>**

<script>
    $(document).ready(() => {
        $('.slick').slick({
            //autoplay: true,
            fade: true,
            dots: false,
            speed: 2000,
            autoplaySpeed: 100,
            pauseOnHover: true,
            arrows: true,
            prevArrow: $('.arrow-prev'),
            nextArrow: $('.arrow-next')
  })
 })
</script>

有什么解决这个问题的办法吗？

jquery

来源：https://stackoverflow.com/questions/69689086/prevarrow-and-nextarrow-not-working-with-multiple-slick-sliders

1条答案

按热度按时间

w46czmvw1#

已经一年多了，但是我遇到了这些问题，必须深入挖掘才能找到一个好的答案。
因为这是我做研究时最常想到的问题
在这里，
此解决方案由@Hyzyr提出
它在这个页面上：Slick slider appendArrows to multiple containers, arrows not working except last one
如果您在一个页面中使用多个滑块，则应为此添加额外的脚本。

$(window).on("load resize orientationchange", function () {
    $(".slider").each(function () {
        var slider = $(this);
    
        slider.slick({
            centerMode: false,
            centerPadding: '60px',
            arrows: true,
            dots: true,
            slidesToShow: 3,
            autoplay: true,
            prevArrow: slider.parent().find('.btnPrev'),
            nextArrow: slider.parent().find('.slider__btnNext'),
            
        });
    });
});

HTML是这样的

<div class="sliderParent">
    <button class="btnPrev"></button>
    <button class="btnNext"></button>
    <div class="slider">
        <div class="item">a</div>
        <div class="item">b</div>
        <div class="item">c</div>
        <div class="item">d</div>
    </div>
</div>

赞(0）回复(0）举报 2022-12-22

我来回答

jquery prevArrow和nextArrow不适用于多个光滑滑块

1条答案

相关问题

热门标签

最新问答