Is there a way to destroy FlexSlider

Question

I am trying to reinitialize FlexSlider with a page refresh when a new gallery list is called asynchronous.

I would have thought that the subroutine below would work, but it is not. It appears that the first FlexSlider is saved, although new images have been successfully uploaded.

Is there a way to destroy and then rebuild the gallery?

thanks

function flexInit() { $('.flexslider').flexslider({ animation: "slide", controlsContainer: ".paginator", manualControls: 'a', after: function(slider){ if(slider.atEnd == true) { // ??? slider.destroy; galBuild(); } } }); } function galBuild() { $.getJSON("/gallery/next/"+galID, function (data) { var results = data.objects; var list = $(".flexslider ul.slides"); var i = 0; $.each(results, function () { list.append('<li><p>' + results[i].title + '</p><img src="' + results[i].src + '"><p class="flex-caption">' + results[i++].caption + '</p></li>'); }); flexInit(); }); } galBuild(); 

Answer 1

I use a different approach, i.e.

you launched one flexslider:

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

when I want to change the slides in a previously created slider and restart it, id does the following:

• creating a temporary div:

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

• delete div with previously created slider

   $('#element).remove(); 

• add a new slide list to the 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'); 

and it works with several flexliders

Answer 2

Rob researched this and found a solution.

You need to change your functions as follows

 function flexInit() { $('.flexslider').flexslider({ animation: "slide", controlsContainer: ".paginator", manualControls: 'a', after: function(slider){ if(slider.atEnd == true) { slider.addSlide(galBuild()); } } }); } function galBuild() { $.getJSON("/gallery/next/"+galID, function (data) { var results = data.objects; var i = 0; $.each(results, function () { return ('<li><p>' + results[i].title + '</p><img src="' + results[i].src + '"><p class="flex-caption">' + results[i++].caption + '</p></li>'); }); }); } flexInit(); 

You also need to make some cosmetic changes to the flexSlider.js file in the slider.update function. now it does not check the position variable if it arrives undefined , so you will also need to check it.

Answer 3

The easiest way is to remove flexcroll from the item dataset

 function flexInit() { $('.flexslider').flexslider({ animation: "slide", controlsContainer: ".paginator", manualControls: 'a', after: function(slider){ if(slider.atEnd == true) { slider.addSlide(galBuild()); } } }); } //this remove flexslider form element dataset $('.flexslider').removeData("flexslider"); 

and now you can call

 flexInit(); 

and your flexslider will be recreated.