Gibt es eine Zerstörungsmethode für FlexSlider

Question

Ich versuche, FlexSlider mit Seitenaktualisierung reinitialisieren, wenn eine neue Galerie Auflistung asynchron aufgerufen wird.

Ich würde denken, die Routine unten würde funktionieren, aber es nicht. Es sieht so aus, als ob der erste FlexSlider bestehen bleibt, obwohl die neuen Bilder erfolgreich geladen wurden.

Gibt es eine Möglichkeit zu zerstören, dann die Galerie neu erstellen?

Dank

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 anderen Ansatz ist mit dh

Sie einen flexslider begonnen haben:

 

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

, wenn ich will Dias in zuvor erstellten Schiebern ändern und neu starten, id Sie folgende Dinge:

• Schaffung temporaty div:

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

• löschen div mit zuvor erstellten Schieber

  $('#element).remove(); 
  

• Einsatz neuer Dialiste in temporäre 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 auf Temp div

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

• Änderung div ID von element_temp bis Element

  $('#element_temp').attr('id','element'); 
  

und es funktioniert mit mehreren flexliders

Answer 2

Rob suchte ich diese und die Lösung

Sie benötigen finden Sie Funktionen wie diese

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

auch einige kosmetische Änderungen in flexSlider tun müssen, ändern. js-Datei in slider.update Funktion. gerade jetzt überprüft es nicht die Position Variable, wenn es undefined kommt, so müssen Sie dies auch überprüfen.

Answer 3

Der einfachste Weg ist es, das flexscroll von Element-Datensatz

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

und jetzt frei Sie sind zu entfernen

anrufen

flexInit(); 

und Ihr Flexslider wird neu erstellt.