Slick Slider点击图片后幻灯片高速滑动问题解决咨询

嘿，我来帮你搞定这个烦人的Slick Slider异常！你遇到的点击图片后幻灯片高速连续切换的问题，大概率是focusOnSelect: true和variableWidth: true这两个配置冲突导致的——当开启focusOnSelect时，Slick会强制把点击的幻灯片滚动到选中状态，但variableWidth下每个幻灯片宽度不固定，Slick在计算滚动位置时可能会连续触发多次滚动，看起来就像幻灯片在疯狂切换。

下面给你两个解决方案，按需选择：

方案一：直接禁用focusOnSelect（最简单） #

如果你的需求里不需要点击幻灯片直接定位到它，只需要把focusOnSelect改成false就行，这应该能立刻解决问题：

$(document).ready(function(){ 
  $('.sh_product_slider2').slick({ 
    slidesToShow: 3, 
    slidesToScroll: 1, 
    arrows: true, 
    dots: true, 
    centerMode: false, 
    variableWidth: true, 
    infinite: true, 
    focusOnSelect: false, // 关键修改：把这里从true改成false
    cssEase: 'linear', 
    touchMove: false, 
    prevArrow:'<button class="slick-prev"> < </button>', 
    nextArrow:'<button class="slick-next"> > </button>', 
    responsive: [ 
      { 
        breakpoint: 600, 
        settings: { 
          centerMode: false, 
          variableWidth: true, 
          slidesToShow: 1, 
          slidesToScroll: 1, 
          autoplay: true, 
          autoplaySpeed: 2500, 
          pauseOnHover: false, 
          pauseOnFocus: false, 
          arrows:false 
        } 
      }, 
    ] 
  }); 
});

方案二：保留点击定位功能（自定义事件） #

如果你需要点击幻灯片时能跳转到对应位置，又不想出现高速切换，那可以禁用默认的focusOnSelect，然后手动绑定点击事件用Slick的API来控制滚动：

$(document).ready(function(){ 
  // 先初始化滑块，禁用focusOnSelect
  const slider = $('.sh_product_slider2').slick({ 
    slidesToShow: 3, 
    slidesToScroll: 1, 
    arrows: true, 
    dots: true, 
    centerMode: false, 
    variableWidth: true, 
    infinite: true, 
    focusOnSelect: false, 
    cssEase: 'linear', 
    touchMove: false, 
    prevArrow:'<button class="slick-prev"> < </button>', 
    nextArrow:'<button class="slick-next"> > </button>', 
    responsive: [ 
      { 
        breakpoint: 600, 
        settings: { 
          centerMode: false, 
          variableWidth: true, 
          slidesToShow: 1, 
          slidesToScroll: 1, 
          autoplay: true, 
          autoplaySpeed: 2500, 
          pauseOnHover: false, 
          pauseOnFocus: false, 
          arrows:false 
        } 
      }, 
    ] 
  }); 

  // 给每个幻灯片绑定自定义点击事件
  $('.sh_product_slider2 .slick-slide').on('click', function() {
    // 获取当前幻灯片的索引（Slick默认会给每个slide加data-slick-index属性）
    const slideIndex = $(this).data('slick-index');
    // 用slickGoTo方法滚动到对应索引，第二个参数控制是否带动画（true有动画，false无）
    slider.slick('slickGoTo', slideIndex, true);
  });
});

这个方案通过手动控制滚动行为，避免了Slick默认逻辑的冲突，既能实现点击定位，又不会出现高速切换的异常。

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