Is there a destroy method for FlexSlider

Question

I am trying to reinitialize FlexSlider with out page refresh when a new gallery listing is called asynchronously.

I would think the routine below would work but it doesn't. It seems like the first FlexSlider persists even though the new images are successfully loaded.

Is there a way to destroy, 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();

Solution 1

i'm using different approach i.e.

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

and it works with multiple flexliders

Solution 2

The most easy way is to remove the flexscroll from element 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 are free to call

flexInit();

and your flexslider will be recreated.

Solution 3

Rob i investigated this and find the solution

You need to modify your functions like this

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

Also you need to do some cosmetic changes in flexSlider.js file in slider.update function. right now its not checking the position variable if it comes undefined, so you will have to check this as well.