Add or remove slides using jQuery FlexSlider

Question

Can I add or remove slides at runtime using FlexSlider ?

Answer 1

The new version of FlexSlider 2 already supports these methods.

slider.addSlide(obj, pos) takes two parameters: a string / jQuery object and an index. slider.removeSlide(obj) accepts a single parameter, either the object to be deleted or the index.

Answer 2

This is what I saw after watching this topic.

A slider and a carousel object can be created and added as follows:

 $('#slider').data('flexslider').addSlide(""); $('#carousel').data('flexslider').addSlide(""); 

Clicking on the carousel to go to a specific image does not work, but the scroll buttons on both work.

Answer 3

The actual implementation of FlexSlider does not support it.

If you change the actual implementation to return a slider object, using this object you can stop the slider, delete the slide you want, and then recreate the slider.

Answer 4

Having tried many different ideas, I got this solution for dynamically adding or removing a new image or video in Flexslider, and it works 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> 

According to the code, using the browse file you can select several images and videos to add to Flexslider, and using the delete button you can delete the current slide. I also added some verification, so only the image or video will be added to the slider. It will give a warning if you select any other extension. I created this code according to my requirement, you can customize it according to your requirements.