Is there a destroy method for FlexSlider

6
votes

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();
3
jquerydomflexslider
from where "galID" argument passed in galBuild() function? – Kundan Singh Chouhan
Hi Kundan... galID is just a global gallery variable declared earlier on. Doesn't really have any bearing on reinitializing FlexSlider – rob - not a robber

3 Answers

10
votes

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

2
votes

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.

2
votes

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.