使用jQuery 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中，使用删除按钮，您可以删除当前幻灯片。我还添加了一些验证，所以只有图像或视频会被添加到滑块中。如果您选择任何其他扩展，它将发出警报。我根据自己的要求创建了这段代码，您可以根据自己的需求进行相应的自定义。