Slick Slider：点击导航滑块时禁止其滑动的实现方案

问题场景 #

使用Slick Slider时，点击.slider-nav缩略滑块，希望仅让该滑块标记为激活状态，禁止导航滑块自身发生滑动或居中定位。目前已配置基础滑块参数，且尝试了手动调用slickGoTo的代码，但未达到预期效果。

解决方案思路 #

默认情况下，asNavFor和focusOnSelect的组合会触发导航滑块的滚动定位逻辑。要实现需求，需手动接管导航滑块的点击行为，阻断默认滚动，同时同步主滑块切换与激活状态：

1. 移除导航滑块配置中的asNavFor，解除与主滑块的自动联动滚动
2. 绑定导航滑块的点击事件，阻止Slick的默认处理逻辑
3. 手动切换主滑块到对应索引，并管理导航滑块的激活类

修改后的完整代码 #

$(document).ready(function() {
  var mainSlider = $(".slider-for");
  var navSlider = $(".slider-nav");

  mainSlider.slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    prevArrow: ".prev-arrow",
    nextArrow: ".next-arrow",
    adaptiveHeight: true,
    fade: true,
    speed: 300,
    cssEase: "cubic-bezier(0.77, 0, 0.18, 1)",
    asNavFor: ".slider-nav", // 保留主滑块对导航的联动（主滑块切换时导航同步激活状态）
  });

  navSlider.slick({
    slidesToShow: 5,
    slidesToScroll: 1,
    // 移除asNavFor，避免导航滑块跟随主滑块滚动
    dots: false,
    arrows: false,
    centerMode: false,
    focusOnSelect: false, // 关闭自动选中聚焦，避免触发滚动
    swipe: false, // 禁用导航滑块的滑动操作
    responsive: [{
        breakpoint: 1024,
        settings: {
          slidesToShow: 5,
          slidesToScroll: 1,
        },
      },
      {
        breakpoint: 640,
        settings: {
          slidesToShow: 4,
          slidesToScroll: 1,
        },
      },
      {
        breakpoint: 580,
        settings: {
          infinite: true,
          slidesToShow: 3,
          slidesToScroll: 1,
        },
      },
    ],
  });

  // 手动绑定导航滑块点击事件
  navSlider.on('click', '.slick-slide', function(event) {
    // 阻止Slick的默认点击处理逻辑，避免滚动
    event.stopPropagation();
    event.preventDefault();

    var slideIndex = $(this).data('slickIndex');
    // 切换主滑块到对应索引
    mainSlider.slick('slickGoTo', slideIndex);

    // 手动更新导航滑块的激活状态
    navSlider.find('.slick-slide').removeClass('slick-active');
    $(this).addClass('slick-active');
  });

  // 同步主滑块切换时导航的激活状态（可选，保持主滑块切换时导航高亮）
  mainSlider.on('afterChange', function(event, slick, currentSlide) {
    navSlider.find('.slick-slide').removeClass('slick-active');
    navSlider.find('.slick-slide[data-slick-index="' + currentSlide + '"]').addClass('slick-active');
  });
});

关键说明 #

• 移除导航滑块的asNavFor配置，彻底切断导航滑块的自动滚动触发源
• 设置focusOnSelect: false，避免Slick自动将点击的slide滚动到可视区域
• 在点击事件中调用event.stopPropagation()和event.preventDefault()，阻断Slick内部的默认处理逻辑
• 手动维护导航滑块的slick-active类，确保激活状态正确显示
• 可选的afterChange事件监听，保证主滑块通过箭头切换时，导航滑块的激活状态也能同步更新

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