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

Ahab

from where "galID" argument passed in galBuild() function? – Fiscus

Hi Kundan... galID is just a global gallery variable declared earlier on. Doesn't really have any bearing on reinitializing FlexSlider – Ahab

Answer 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

Armond

this was very helpful - I didn't need to change the id at the end though it was screwing the up the start point of my slider but I apprecaited the info – Aksoyn

Thank you! It's unfortunate FlexSlider doesn't provide an easy way to 'reset' the slider. This solution seems to be working well though. – Erbes

Answer 2

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.

Fiscus

Kundan... you're definitely taking me down the right road here. THanks. When the FlexSlider is called again though, the control area goes wild trying to get setup and I get a stack error $.flexslider.methods.controlNav.update $.flexslider.slider.update I will keep you updated on my progress – Ahab

Answer 3

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.

Carmencarmena