Add or remove slides using jQuery FlexSlider

Question

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

Need help on this subject too.. I have the same problem. My case is me having a first slide wich I want to delete after it was shown the first time. Any help would be much appreciated! I've removed the div using $('div').remove(); but now we need to update slider.slides. — Joeri Minnekeer, Mar 01 '12 at 14:41

Diogo Cardoso · Accepted Answer · 2012-06-20T07:20:53.370

15

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.

edited Jun 20 '12 at 07:20

answered Jun 19 '12 at 23:11

Diogo Cardoso

21,637
26
100
138

2

But how do I access the slider object? – Zhen Jan 10 '13 at 05:16
With `.addSlide()` and `.removeSlide()` - you can only access the slider object within the `start` and `end` properties. – Ojame Apr 07 '13 at 23:08
10

@Zhen You can create the slider object like this: `var slider = $('.flexslider').data('flexslider');` and use it like this `slider.removeSlide(0);` – Simon27 May 08 '13 at 16:52
1

and what will be the data in object to add to flexslider? I am trying this data var obj="
"+"

Sajid Ahmad

Feb 08 '15 at 13:34

score 1 · Answer 2 · edited Sep 02 '15 at 00:14

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.

edited Sep 02 '15 at 00:14

J0e3gan

8,740
10
53
80

answered Sep 01 '15 at 23:43

Stephen Himes

655
9
13

score 0 · Answer 3 · answered Jan 11 '19 at 17:25

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.

score 0 · Answer 4 · answered Mar 07 '12 at 18:32

0

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.

answered Mar 07 '12 at 18:32

Rafael Verger

1,751
13
18

Add or remove slides using jQuery FlexSlider

4 Answers4

Linked