slick 旋转木马（轮播图）插件清空滑块slide的方法

$(".ui-slider .slider").slick('removeSlide', null, null, true);

很多情况我们的轮播图不是静态的，也不仅仅是页面第一次加载完载入一次而已。

假如需求是：用户点击筛选之后轮播图内容根据筛选进行重新更换，那么我们的slick是不能够二次初始化操作的。其实我们无需二次初始化。

此情况下我的做法是remove掉原来的所有滑块slide，用这个方法：$(".ui-slider .slider").slick('removeSlide', null, null, true); 然后再用slick提供的增加滑块的方法：$(".ui-slider .slider").slick('slickAdd', i);循环加入需要的滑块数量。

slick 方法详细介绍链接：http://kenwheeler.github.io/slick/

代码例子：

$.ajax({
url:'/lifetouch/a/store/storeIndex/findProductListBySort',
type:'POST',
dataType:'json',
data:{
categoryId:idStr+"",
aliasNameOne:aliasNameOne+"",
labelStr:"sellNumberStr",
page:page,
pageSize:pageSize
},
success:function(data1){
//模拟数据结构
var data = [
{ "id":"1" , "url":"/lifetouch//static/merchantAndStore/image/entity_merchant/classify_store_all_img1.png" }, 
{ "id":"2" , "url":"/lifetouch//static/merchantAndStore/image/entity_merchant/classify_store_all_img2.png" }, 
{ "id":"3" , "url":"/lifetouch//static/merchantAndStore/image/entity_merchant/classify_store_all_img3.png" },
{ "id":"4" , "url":"/lifetouch//static/merchantAndStore/image/entity_merchant/classify_store_all_img4.png" }
];
if(data!=""){
$(".ui-slider .slider").slick('removeSlide', null, null, true);//滑块全部清空
for (var i = 0; i < data.length; i++){
console.log(i);
$(".ui-slider .slider").slick('slickAdd',"<div>"+
           "<div class='ui-slide'>"+
           "<a href='${lifetouchRelease.visitUrl}&returnType=storeIndex'>"+
          "<img src='"+data[i].url+"' />"+
           "</a>"+
          " </div>"+
       " </div>");
}
}
}
});

代码图片：