我使用slick js作为图像的滑块视图
这是我的密码
<;div class=“滑块\u包裹添加删除”>;
<;%=f、 字段|用于:图像不|图像|形式|%>;
<;%#=渲染“图像\u字段”,:f=>;图像形式%>;
<;部门>;
<;%=image\u tag image\u form.object.picture.url,:class=>;“下拉链接即使是img\u prev”%>;
</部门>;
<;div class=“image\u upload\u div”>;
<;div class=“图像上传”>;
<;标签>;
<;i class=“fa云上传”>;
<;%=image_form.file_字段:picture,:'data-role'=>;“无”,:onchange=>;“readURL(this);”,:accept=>;'image/jpeg,image/png%>;
</i>;
</标签>;
</部门>;
</部门>;
<;%结束%>;
<;%=f、 链接到添加“添加图片”,:images,:id=>;“添加图片”,类别=>;“js添加幻灯片”,:style=>;“显示:无;”%>;
</部门>;
<;脚本>;
函数silder(){
slideIndex=0;
$('.add-remove').slick({
幻灯片放映:2,
幻灯片滚动:2
});
$('.js添加幻灯片')。在('click',function()上{
$('.add-remove').slick('slickAdd');
});
$('.js删除幻灯片')。在('click',function()上{
$('.add-remove').slick('slickRemove');
});
});
函数readURL(输入){
if(input.files&;input.files[0]){
var reader=new FileReader();
reader.onload=函数(e){
$('.img_prev').last()
.attr('src',e.target.result)
};
reader.readAsDataURL(input.files[0]);
setTimeout(函数(){
$('add#pic')。触发器('click');
silder();
}, 100);
}
}
</脚本>;
现在有了这段代码,我就可以使用滑块了,但这并不正确,我遇到了一个错误:
未捕获的TypeError:无法读取null的属性“add”
这是因为调用init两次。这样做不会出错:
$(“.slider”).not(“.slick初始化”).slick()
而且,“silder”看起来像一个打字错误
依赖超时也容易出错。不幸的是,InternetExplorer使用不同的事件来告诉您何时加载了HTML元素和JS库。有许多库可以避免100行左右的跨浏览器代码,但流行的相对较小的jQuery解决了如下计时问题:
$(函数(){
//.ready()的处理程序调用。将滑动条等初始代码放在这里。
})