¿Cómo puedo eliminar todas las diapositivas de flexslider y agregar nuevas diapositivas?

O cómo hago para destruir y reintialise flexslider?

Básicamente quiero restablecer flexslider de cualquier manera.

//Create hotel image array
$('#carousel').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    itemWidth: 210,
    itemMargin: 0,
    minItems: 4,
    asNavFor: '#slider'
});

$('#slider').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    sync: "#carousel",
    start: function (slider) {
        $('body').removeClass('loading');
    }
});

Enlaces a flexslider:

EDICIÓN:

PLUNKR ENLACE: ENLACE

He descargado esta versión que se supone que tiene un método destroy:
https://github.com/woothemes/FlexSlider/pull/716

Pensé que esta sería la respuesta, pero por alguna razón mi carrusel parece no funcionar después de la carga en un segundo conjunto como si yo no lo reinicializar nuevo?

  • Así en el momento simplemente estoy llamando flexslider cada vez que la galería elemento de la lista se actualiza. Esta es, obviamente, causar resultados inusuales. No, no parece ser mucha documentación sobre cómo hacer esto. Voy a la configuración de un plunkr pronto.
  • He añadido un plunkr enlace ahora, echar un vistazo.
InformationsquelleAutor Malcr001 | 2013-06-17

4 Comentarios

  1. 6

    Paso 1 – eliminar las diapositivas existentes:

    var slider = $('.flexslider');
    while (slider.data('flexslider').count > 0) 
                        slider.data('flexslider').removeSlide(0);

    Paso 2 – añadir nuevas diapositivas:

    slider.data('flexslider').addSlide('<li>Hello world!</li>');
    slider.data('flexslider').addSlide('<li>This is awsome</li>');

    ACTUALIZACIÓN!

    Paso 3 – establecer el foco en la primera diapositiva (omitir este paso resultó en la obtención de vacío diapositivas a partir de tiempo al tiempo)

    slider.flexslider(0);
    • Esto hace que la mina ya no bucle
  2. 1

    Ok, así que después de cavar alrededor resulta que flexslider ahora tiene un método destroy pero que me obligó a usar el demo en la página de github para que funcione. He creado un trabajo plunker, que agrega y quita un flexslider carrusel ENLACE

    Ver también aquí: ENLACE

    • Exactamente lo que necesitaba 🙂
    • sólo en el caso de personas con problemas similares chocar aquí … estoy usando FlexSlider v2.3.0 y .flexslider(«destruir») no parece estar trabajando más. La otra solución presentada a continuación (por quitar y volver a crear el elemento) funciona pero he utilizado una solución más //this remove flexslider form element dataset $('.flexslider').removeData("flexslider"); de Referencia stackoverflow.com/questions/11248283/…
  3. 0

    Debe incluir un enlace a flexslider en el OP, no es uno que he usado /tienen acceso a la parte superior de mi cabeza. Con eso dicho, en general, buena plugins suelen venir con un método destroy. Primera cosa que me gustaría intentar, sería para ver si un método destroy se define en flexslider, así:

    $('#slider').flexslider("destroy");

    EDICIÓN:

    Parece que este hilo tiene algunos buenos consejos /código hacia la parte inferior para probar – https://github.com/woothemes/FlexSlider/issues/78

    • Agregado de enlaces relevantes. Destruir no parece hacer nada.
    • Editado mi respuesta con un enlace a un flexslider problema en github que pueden ayudar.
    • He añadido un plunkr enlace que utiliza el «destruir» método. Por favor, eche un vistazo. Tal vez la búsqueda de una forma para eliminar todas las imágenes de las diapositivas y añadir la otra imagen de las diapositivas es una mejor manera?
  4. 0

    Es mejor seguir este. Básicamente se iniciará el 1 de control deslizante. Entonces, si usted desea reiniciar, a continuación, retire primero el slider html/datos y todas, a continuación, empezar a agregar la nueva y la inicia.

    que has empezado una flexslider:

     
    $('#elemento').flexslider({ 
    animación: "presentación", 
    controlNav: false, 
    directionNav: true 
    }); 
    
    

    cuando quiero cambiar de diapositivas creado previamente regulador y reiniciar, identificación de hacer las siguientes cosas:

    • la creación de temporaty div:

      $('#element').before('
          <div id="element_temp" class="flexslider"></div>
      ');
    • eliminar div creados anteriormente regulador

      $('#element').remove();
    • inserte la nueva lista de diapositivas de forma temporal 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);
    • inicio flexslider en temp div

      $('#element_temp').flexslider({
        animation: "slide",
        controlNav: false,
        directionNav: true
      });
    • de cambio de div ID de element_temp elemento

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

Dejar respuesta

Please enter your comment!
Please enter your name here