Add or remove slides using jQuery FlexSlider

Question

Is it possible to add or remove slides in runtime using FlexSlider?

Answer 1

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.

Answer 2

The new version of FlexSlider 2 already supports this methods.

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.

Answer 3

The actual implementation of FlexSlider doesn't support it.

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.

Answer 4

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.

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:

<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.