Uncaught TypeError: 无法读取null的属性'add'——Slick滑块代码报错求助

这个错误大概率是Slick插件初始化时找不到目标DOM元素，或是代码执行时机不对导致的，我来帮你一步步排查解决：

1. 修正代码执行时机（最常见原因） #

你的代码末尾多了一个多余的});，而且看起来没有包裹在DOM加载完成的回调里——Slick必须等目标元素已经渲染到页面后才能初始化，否则会因找不到元素抛出这个错误。

把代码包裹在$(document).ready()回调中，确保DOM完全加载后再执行初始化：

$(document).ready(function() {
  // 主滑块初始化
  $('.main_images').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    asNavFor: '.thumb_images'
  });

  // 缩略图滑块初始化
  $('.thumb_images').slick({
    slidesToShow: 4,
    slidesToScroll: 1,
    asNavFor: '.main_images',
    dots: false,
    focusOnSelect: true,
    vertical: true,
    arrows: false,
    infinite: false,
    responsive: [
      {
        breakpoint: 481,
        settings: {
          vertical: false,
          infinite: true,
          slidesToShow: 3,
          slidesToScroll: 1
        }
      }
    ]
  });
});

2. 确认目标DOM元素存在 #

检查你的HTML中是否确实存在类名为main_images和thumb_images的元素，注意类名的拼写、大小写要完全一致（比如不要写成main-image或者MainImages）。

你可以在浏览器控制台执行console.log($('.main_images'), $('.thumb_images'))，如果返回的是空jQuery对象（[]），说明选择器没有匹配到任何元素，需要修正类名或者检查元素是否在代码执行时已经存在。

3. 确认Slick依赖正确引入 #

Slick依赖jQuery，所以要确保引入顺序正确：

• 先引入jQuery库
• 再引入Slick的CSS文件
• 最后引入Slick的JS文件

如果依赖没正确引入，也可能导致初始化时出现奇怪的错误。

按照上面的步骤排查，应该就能解决这个报错了！

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