javascript 使用 jQuery FlexSlider 添加或删除幻灯片
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8929961/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add or remove slides using jQuery FlexSlider
提问by Diogo Cardoso
Is it possible to add or remove slides in runtime using FlexSlider?
是否可以使用FlexSlider在运行时添加或删除幻灯片？
回答by Diogo Cardoso
The new version of FlexSlider 2 already supports this methods.
新版本的FlexSlider 2已经支持这种方法。
slider.addSlide(obj, pos)accepts two parameters, a string/jQuery object and an index.
slider.removeSlide(obj)accepts one parameter, either an object to be removed, or an index.
slider.addSlide(obj, pos)接受两个参数，一个字符串/jQuery 对象和一个索引。
slider.removeSlide(obj)接受一个参数，要么是要删除的对象，要么是索引。
回答by Stephen Himes
This is just what I saw after looking at this thread.
这只是我在查看此线程后所看到的。
The slider and the carousel object can be instantiated and added to like this:
滑块和轮播对象可以像这样被实例化和添加：
$('#slider').data('flexslider').addSlide("");
$('#carousel').data('flexslider').addSlide("");
The click on the carousel to scroll to the particular image doesn't work, but the scroll buttons on both work.
单击旋转木马滚动到特定图像不起作用，但两者上的滚动按钮都起作用。
回答by Arjun
After trying lots of different ideas, I got this solution to add or remove a new image or video in Flexslider dynamically and its working fine.
在尝试了许多不同的想法之后，我得到了这个解决方案，可以在 Flexslider 中动态添加或删除新的图像或视频，并且工作正常。
JQuery code:
查询代码：
$("#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 code:
HTML代码：
<input type="file" id= "add2" multiple>
<button id="remove" onclick="remove()" value="Remove">Remove</button>
as per the code, with browse file, you can select multiple images and videos to add in Flexslider and with remove button, you can remove a current slide.I also added some validation so only image or video will be add in a slider. It will give an alert if you select any other extension. I created this code as per my requirement, you can customize it accordingly to your requirements.
根据代码，使用浏览文件，您可以选择多个图像和视频添加到 Flexslider 中，使用删除按钮，您可以删除当前幻灯片。我还添加了一些验证，因此只会在滑块中添加图像或视频。如果您选择任何其他扩展名，它会发出警报。我根据我的要求创建了此代码，您可以根据自己的要求对其进行自定义。
回答by Rafael Verger
The actual implementation of FlexSlider doesn't support it.
FlexSlider 的实际实现不支持它。
If you modify the actual implementation to return the slider object, with this object you can stop the slider, remove the slide you want and then recreate the slider.
如果您修改实际实现以返回滑块对象，您可以使用此对象停止滑块，移除您想要的滑块，然后重新创建滑块。
