多个slick滑块自定义prevArrow与nextArrow仅作用于第二个滑块问题求助

你当前使用全局类选择器$('.arrow-prev')、$('.arrow-next')会选中页面内所有同类名的箭头元素，批量初始化所有.slick滑块时，箭头会被反复绑定事件，最终所有箭头的点击事件只会对最后一个完成初始化的滑块生效，所以才会出现点击任意滑块的箭头都控制第二个滑块的情况。

你需要单独遍历每一个滑块，只绑定当前滑块所属容器内的专属箭头：

1. 首先保证每个滑块的结构独立，每个滑块和对应的箭头都放在独立的父级<section>容器内，不要多个滑块共用同一个父容器。
2. 修改初始化JS逻辑如下：

$(document).ready(() => {
    // 遍历每一个slick滑块单独初始化
    $('.slick').each(function () {
        const $currentSlider = $(this)
        // 查找当前滑块对应的专属箭头
        const $prevArrow = $currentSlider.siblings('.arrow-prev')
        const $nextArrow = $currentSlider.siblings('.arrow-next')
        // 若箭头不在滑块同级，可改为从父容器查找：
        // const $prevArrow = $currentSlider.closest('#slideshow').find('.arrow-prev')
        // 初始化当前滑块
        $currentSlider.slick({
            //autoplay: true,
            fade: true,
            dots: false,
            speed: 2000,
            autoplaySpeed: 100,
            pauseOnHover: true,
            arrows: true,
            prevArrow: $prevArrow,
            nextArrow: $nextArrow
        })
    })
})

如果你的滑块是动态渲染插入DOM的，需要等滑块对应的DOM完全插入完成后再执行上述初始化逻辑，避免找不到对应元素导致绑定失效。

内容的提问来源于stack exchange，提问作者Coccinelle