是否可以在运行时使用FlexSlider添加或删除幻灯片?
FlexSlider 2的新版本已经支持这些方法。
slider.addSlide(obj, pos)
接受两个参数,一个字符串/jQuery对象和一个索引。slider.removeSlide(obj)
接受一个参数,要么是要删除的对象,要么是索引。
这正是我看完这个线程后看到的。
滑块和转盘对象可以实例化并添加到如下位置:
$('#slider').data('flexslider').addSlide("");
$('#carousel').data('flexslider').addSlide("");
点击转盘滚动到特定图像不起作用,但两个滚动按钮都起作用。
FlexSlider的实际实现不支持它。
如果修改实际实现以返回滑块对象,则可以使用此对象停止滑块,移除所需的滑块,然后重新创建滑块。
在尝试了很多不同的想法后,我得到了这个解决方案,可以在Flexslider中动态添加或删除新的图像或视频,并且工作良好。
JQuery代码:
$("#add2").change(function(event)
{
var fuData = document.getElementById('add2');
var files = event.target.files;
for(var i = 0; i< files.length; i++)
{
var file = files[i];
var filename = file.name;
var Extension =
filename.substring(filename.lastIndexOf('.') + 1).toLowerCase();
if(Extension == 'png' || Extension == 'jpg' || Extension == 'jpeg' || Extension == 'svg'){
var reader = new FileReader();
reader.onload = function(e)
{
var img = document.createElement("IMG");
img.src = e.target.result;
div = "<li><img src="+img.src+" /></li>";
$('.flexslider').data('flexslider').addSlide($(div));
}
}
else if (Extension == 'mp4')
{
var reader = new FileReader();
reader.onload = function(event){
var video = document.createElement("video");
video.src = event.target.result;
div = " <li><video src="+video.src+" width='100%' height='500' controls></video></li>";
$('.flexslider').data('flexslider').addSlide($(div));
}
}
else
{
alert(filename+' '+'is not in supported format');
$("#add2").val('');
}
reader.readAsDataURL(file);
}
});
function remove()
{
var slider = $('.flexslider').data('flexslider');
slider.removeSlide(slider.currentSlide);
}
HTML代码:
<input type="file" id= "add2" multiple>
<button id="remove" onclick="remove()" value="Remove">Remove</button>
根据代码,使用浏览文件,您可以选择多个图像和视频添加到Flexslider中,使用删除按钮,您可以删除当前幻灯片。我还添加了一些验证,所以只有图像或视频会被添加到滑块中。如果您选择任何其他扩展,它将发出警报。我根据自己的要求创建了这段代码,您可以根据自己的需求进行相应的自定义。