Clearing and adding slides / Reinitialising flexslider?

问题

How do I remove all slides from flexslider and add new slides?

Or how to do I destroy and reintialise flexslider?

Basically I want to reset flexslider either way.

//Create hotel image array
$('#carousel').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    itemWidth: 210,
    itemMargin: 0,
    minItems: 4,
    asNavFor: '#slider'
});

$('#slider').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    sync: "#carousel",
    start: function (slider) {
        $('body').removeClass('loading');
    }
});

Links to flexslider:

http://www.woothemes.com/flexslider/
https://github.com/woothemes/flexslider

EDIT:

PLUNKR LINK: LINK

I downloaded this version which is supposed to have a destroy method: https://github.com/woothemes/FlexSlider/pull/716

I thought this would be the answer but for some reason my carousel seems to no longer work after loading in a second set as if I didn't reinitialize it again?

回答1:

Step 1 - remove existing slides:

var slider = $('.flexslider');
while (slider.data('flexslider').count > 0) 
                    slider.data('flexslider').removeSlide(0);

Step 2 - add new slides:

slider.data('flexslider').addSlide('<li>Hello world!</li>');
slider.data('flexslider').addSlide('<li>This is awsome</li>');

UPDATE!

Step 3 - set focus back on the first slide (omitting this step resulted in getting empty slides from time to time)

slider.flexslider(0);

回答2:

Ok so after digging around it turns out that flexslider now has a destroy method but it required me to use the demo on the github page to get it working. I created a working plunker which adds and removes a flexslider carousel LINK

Also see here: LINK

回答3:

You should include a link to flexslider in the OP, it's not one I've used / have access to off the top of my head. With that said, generally good plugins tend to come with a destroy method. First thing I would try would be to see if a destroy method is defined on flexslider, like so:

$('#slider').flexslider("destroy");

EDIT:

Looks like this thread has some good tips / code towards the bottom to try out - https://github.com/woothemes/FlexSlider/issues/78

回答4:

It is better to follow this. Basically it initiate 1 slider. Then if you want to reinitiate then remove first slider html/data and all then start adding new and initiate it.

you've started one flexslider:


    $('#element').flexslider({
      animation: "slide",
      controlNav: false,
      directionNav: true
    });

when I want to change slides in previously created slider and restart it, id do following things:

creating temporaty div:

$('#element').before('
    <div id="element_temp" class="flexslider"></div>
');

delete div with previously created slider
```
$('#element').remove();
```

insert new list of slides into temporary div:

var html = `
<ul class='slides">
<li><img src="link to image" /></li>
<li><img src="link to image" /></li>
<li><img src="link to image" /></li>
</ul>`;
$('#element_temp').html(html);

start flexslider on temp div

$('#element_temp').flexslider({
  animation: "slide",
  controlNav: false,
  directionNav: true
});

change div ID from element_temp to element

$('#element_temp').attr('id','element');

来源：https://stackoverflow.com/questions/17151481/clearing-and-adding-slides-reinitialising-flexslider

标签

jquery

gallery

carousel

flexslider