Slick Carousel初始化调用slickAdd报类型错误问题求助

这个错误出现的核心原因是你在addPosterSlide函数里重新通过选择器获取轮播元素时，可能没有正确关联到已经初始化好的Slick实例——尽管init事件已经触发，但重新选择元素可能存在上下文匹配问题，导致调用slick('slickAdd')时找不到对应的实例。

这里有两种更可靠的解决方案：

方案1：使用init事件回调中的Slick实例对象 #

init事件的第二个参数slick就是当前轮播的实例对象，直接调用它的add方法（对应slickAdd命令）即可，无需再通过选择器获取元素：

var posterSlide = "<div class='item mobile-poster'>PUT STUFF IN HERE</div>";

$(document).ready(function(){ 
  $('.featured-carousel').on('init', function(event, slick){ 
    console.log('on init'); 
    if ($(window).width() < 737) { 
      // 直接用Slick实例调用add方法，第二个参数true表示添加到开头
      slick.add(posterSlide, true);
    } 
  }); 

  $('.featured-carousel').slick({ 
    dots: true, 
    infinite: true, 
    speed: 1000, 
    slidesToShow: 1, 
    slidesToScroll: 1, 
    autoplay: true, 
    autoplaySpeed: 10000, 
    arrows: true, 
    focusOnSelect: true 
  }); 
});

方案2：使用回调中的当前元素（this） #

在init事件的回调里，this指向的就是刚刚完成初始化的轮播元素，用它来调用slick('slickAdd')可以确保匹配到正确的实例：

var posterSlide = "<div class='item mobile-poster'>PUT STUFF IN HERE</div>";

$(document).ready(function(){ 
  $('.featured-carousel').on('init', function(event, slick){ 
    console.log('on init'); 
    if ($(window).width() < 737) { 
      $(this).slick('slickAdd', posterSlide, true);
    } 
  }); 

  $('.featured-carousel').slick({ 
    dots: true, 
    infinite: true, 
    speed: 1000, 
    slidesToShow: 1, 
    slidesToScroll: 1, 
    autoplay: true, 
    autoplaySpeed: 10000, 
    arrows: true, 
    focusOnSelect: true 
  }); 
});

如果想保留addPosterSlide函数，可以改成接收轮播元素作为参数：

function addPosterSlide($carousel){ 
  $carousel.slick('slickAdd', posterSlide, true); 
}

// 在init回调中调用
addPosterSlide($(this));

这两种方案都能避免选择器匹配的不确定性，确保调用的是已经初始化完成的Slick实例方法。

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