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

xiaoxiao2021-02-28  103

$(".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>"); } } } });

代码图片:

转载请注明原文地址: https://www.6miu.com/read-23545.html

最新回复(0)