¿Existe un método de destrucción para FlexSlider

Question

? Estoy intentando reinicializar FlexSlider sin actualizar la página cuando se llama a una nueva lista de la galería de forma asincrónica.

Creo que la siguiente rutina funcionaría pero no es así. Parece que el primer FlexSlider persiste a pesar de que las nuevas imágenes se cargan con éxito.

¿Hay alguna manera de destruir y luego reconstruir la galería?

Gracias

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

estoy usando enfoque diferente es decir

que haya comenzado una flexslider:

 

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

cuando quiero cambiar las diapositivas en deslizador creado previamente y reiniciarlo, El ID de las cosas siguientes:

• crear div temporaty:

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

• eliminar div con control deslizante creado previamente

  $('#element).remove(); 
  

• inserto nueva lista de diapositivas en div temporal: flexslider

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

• inicio de la temp div

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

• cambio de div ID de element_temp para el elemento

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

y funciona con múltiples flexliders

Answer 2

Rob he investigado esto y encontrar la solución

necesita modificar sus funciones como esto

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

También es necesario hacer algunos cambios cosméticos en flexSlider. archivo js en slider.update función. en este momento no está verificando la variable de posición si se trata undefined, por lo que tendrá que comprobar esto también.

Answer 3

La manera más fácil es quitar el flexscroll del conjunto de datos elemento

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

y ahora usted es libre de llamar

flexInit(); 

y su flexslider se recreará.