Slick Slider初始化异常：首次加载正常，跳转页面后需刷新恢复

我之前碰到过好多次这种情况！本质原因是现在很多网站用了无刷新页面跳转（比如Turbolinks、Pjax这类技术），跳转后新页面的DOM是动态加载进来的，但你原来用的$(document).ready()或者$(window).load()只会在首次完整页面加载时触发一次，新页面加载时根本没执行滑块初始化代码，自然就失效了。

给你几个亲测有效的解决办法：

方法一：适配无刷新跳转的通用事件监听 #

把原来的初始化代码包裹到支持无刷新跳转的事件里，同时兼容首次加载的情况：

// 替换掉原来的$(document).ready()
$(document).on('turbolinks:load pjax:complete', function() {
  // 先销毁已存在的滑块实例，避免重复初始化报错
  $('.your-slider-selector').slick('unslick');
  // 重新初始化滑块，替换成你的配置
  $('.your-slider-selector').slick({
    slidesToShow: 3,
    slidesToScroll: 1,
    autoplay: true,
    // ...其他你需要的配置项
  });
});

这里一定要先调用unslick，不然重复初始化滑块会抛出错误，反而更麻烦。

方法二：封装初始化函数，按需调用 #

把滑块初始化逻辑封装成独立函数，然后在不同场景下手动调用：

// 封装初始化函数
function initSlickSlider() {
  // 先清理旧实例
  $('.your-slider-selector').slick('unslick');
  // 初始化滑块
  $('.your-slider-selector').slick({
    // 你的配置参数
  });
}

// 首次页面加载时执行
$(document).ready(initSlickSlider);

// 如果用了Pjax，监听跳转完成事件
$(document).on('pjax:complete', initSlickSlider);

// 如果用了Turbolinks，监听页面加载完成事件
$(document).on('turbolinks:load', initSlickSlider);

这种方式更灵活，不管是哪种无刷新跳转，只要找到对应的完成事件，调用这个函数就行。

方法三：加个小延迟确保DOM渲染完成 #

有时候跳转后滑块元素可能还没完全插入到DOM里，这时候初始化会失败，可以加个短延迟：

$(document).on('turbolinks:load', function() {
  setTimeout(function() {
    // 先检查元素是否存在
    if ($('.your-slider-selector').length) {
      $('.your-slider-selector').slick('unslick').slick({
        // 你的配置
      });
    }
  }, 100); // 延迟时间可以根据实际情况调整，100ms一般足够
});

额外注意点： #

• 尽量用类选择器而不是动态生成的ID，避免DOM元素变化后选择器失效。
• 如果是你自己写的无刷新跳转逻辑，记得在跳转完成后手动调用initSlickSlider()函数。
• 测试前先清一下浏览器缓存，避免旧代码干扰测试结果。

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