Clearing and adding slides / Reinitialising flexsl

问题:

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');