多标签页集成多个Slick.js轮播时仅最后一个的前后箭头可用如何排查

你遇到的问题根源是prevArrow和nextArrow参数传入了全局类选择器，Slick初始化时会在整个文档范围内查找匹配的箭头元素，后续初始化的轮播会覆盖之前轮播绑定的箭头点击事件，最终只有最后一个初始化的轮播的箭头事件生效。

有两种常用的修复方式：

• 方式一：遍历初始化每个轮播，限定箭头查找范围为当前轮播的对应容器内，适合每个轮播的箭头都和轮播容器在同一个父级下的场景

$(document).ready(function () {
    $('.services__slider').each(function() {
        // 可以根据你的实际DOM结构调整查找范围，比如用.parent().parent()找上层容器
        const $currentWrap = $(this).parent();
        $(this).slick({
            infinite: true,
            // 只在当前轮播的容器内查找箭头，不会和其他轮播的箭头冲突
            prevArrow: $currentWrap.find('.arrow-prev'),
            nextArrow: $currentWrap.find('.arrow-next'),
            slidesToShow: 1,
            slidesToScroll: 1
        });
    });
})

• 方式二：给每个轮播和对应箭头添加唯一标识，单独指定绑定关系，适合DOM结构比较分散、不方便按容器查找的场景
  比如给第一个轮播加id="slider1"，对应箭头加类slider1-prev、slider1-next，第二个轮播加id="slider2"，对应箭头加类slider2-prev、slider2-next，再分别初始化：

$('#slider1').slick({
    infinite: true,
    prevArrow: '.slider1-prev',
    nextArrow: '.slider1-next',
    slidesToShow: 1,
    slidesToScroll: 1
});
$('#slider2').slick({
    infinite: true,
    prevArrow: '.slider2-prev',
    nextArrow: '.slider2-next',
    slidesToShow: 1,
    slidesToScroll: 1
});
// 后续轮播按相同规则初始化即可

你原本用于标签页切换后刷新轮播的$('.services__slider').slick('setPosition', 0);代码不需要修改，调整初始化逻辑后依然可以正常使用。

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