javascript - examples - slick vertical

Reinicializar Slick js luego de una exitosa llamada ajax

Question

Estoy usando Slick para una implementación de carrusel y todo funciona bien cuando se cargan las páginas. Lo que estoy tratando de lograr es que cuando hago una llamada Ajax para recuperar datos nuevos, todavía quiero la implementación del carrusel Slick, en el momento en que lo pierdo.

He puesto la llamada para pulir en una función

function slickCarousel() {
  $(''.skills_section'').slick({
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1
  });
}

y luego llamo a la función dentro de mi devolución de llamada de éxito

$.ajax({
    type: ''get'',
    url: ''/public/index'',
    dataType: ''script'',
    data: data_send,
      success: function() {
        slickCarousel();
      }
   });

Pero la función no está siendo llamada. ¿Cómo puedo reinicializar este js?

Answer 1

Nota: no estoy seguro de si esto es correcto, pero puede intentarlo y ver si funciona.

Existe un método de unslick que unslick el carrusel, por lo que puede intentar usarlo antes de reiniciarlo.

$.ajax({
    type: ''get'',
    url: ''/public/index'',
    dataType: ''script'',
    data: data_send,
    success: function() {
        $(''.skills_section'').unslick();  // destroy the previous instance
        slickCarousel();
      }
});

Espero que esto ayude.

Answer 2

¡Aquí vamos, chicos! Me ayudó

$(''.slick-slider'').not(''.slick-initialized'').slick({
   infinite: false,
   slidesToShow: 1,
   slidesToScroll: 1,
   dots: true,
   arrows: false,
   touchThreshold: 9
});

Answer 3

Deberías usar el método de desbastar:

function getSliderSettings(){
  return {
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1
  }
}

$.ajax({
  type: ''get'',
  url: ''/public/index'',
  dataType: ''script'',
  data: data_send,
  success: function() {
    $(''.skills_section'').slick(''unslick''); /* ONLY remove the classes and handlers added on initialize */
    $(''.my-slide'').remove(); /* Remove current slides elements, in case that you want to show new slides. */
    $(''.skills_section'').slick(getSliderSettings()); /* Initialize the slick again */
  }
});

Answer 4

Después de llamar a una solicitud, configure el tiempo de espera para inicializar el control deslizante.

var options = {
    arrows: false,
    slidesToShow: 1,
    variableWidth: true,
    centerPadding: ''10px''
}

$.ajax({
    type: "GET",
    url: review_url+"?page="+page,
    success: function(result){
        setTimeout(function () {
            $(".reviews-page-carousel").slick(options)
        }, 500);
    }
})

No inicialice el deslizador deslizante al inicio. Simplemente inicialice después de un AJAX con tiempo de espera. Eso debería funcionar para ti.

Answer 5

Esto debería funcionar.

$.ajax({
    type: ''get'',
    url: ''/public/index'',
    dataType: ''script'',
    data: data_send,
    success: function() {
        $(''.skills_section'').slick(''reinit'');
      }
});

Answer 6

La mejor manera es destruir el deslizador resbaladizo después de reinicializarlo.

function slickCarousel() {
  $(''.skills_section'').slick({
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1
  });
}
function destroyCarousel() {
  if ($(''.skills_section'').hasClass(''slick-initialized'')) {
    $(''.skills_section'').slick(''destroy'');
  }      
}

$.ajax({
  type: ''get'',
  url: ''/public/index'',
  dataType: ''script'',
  data: data_send,
  success: function() {
    destroyCarousel()
    slickCarousel();
  }
});

Answer 7

La mejor manera sería usar la configuración o función de unslick (según la versión de Slick) como se indica en las otras respuestas, pero eso no funcionó para mí. Estoy recibiendo algunos errores de Slick que parecen estar relacionados con this .

Sin embargo, lo que sí funcionó por ahora es eliminar las clases slick-initialized slick-slider del contenedor antes de reinicializar slick, así:

function slickCarousel() {
    $(''.skills_section'').removeClass("slick-initialized slick-slider");
    $(''.skills_section'').slick({
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 1
    });
}

La eliminación de las clases no parece iniciar el evento de destrucción (no se ha probado, pero tiene sentido), pero hace que la llamada slick() posterior se comporte correctamente, siempre y cuando no tenga ningún desencadenante en la destrucción, debe ser bueno.

Answer 8

Me enfrentaba a un problema en el que el carrusel Slick no actualizaba nuevos datos, añadía nuevas diapositivas a las anteriores, encontré una respuesta que solucionó mi problema, es muy simple.

intente sin deslizar, luego asigne sus nuevos datos que se están procesando dentro de Slick Carousel, y luego inicialice nuevamente Slick. Estos fueron los pasos para mí:

jQuery(''.class-or-#id'').slick(''unslick'');
myData = my-new-data;
jQuery(''.class-or-#id'').slick({slick options});

Nota: consulte el sitio web de Slick para ver la sintaxis por si acaso También asegúrate de que no estés usando Unlick antes de que incluso se haya inicializado Slick, lo que significa es simplemente inicializar (como este jquery(''.my-class'').slick({options} ); la primera llamada ajax y una vez que se inicializa, entonces siga los pasos anteriores, puede utilizar si lo desea

Answer 9

Tuve que quitar el carrusel antes de que comience la llamada ajax, pero no puedes hacerlo hasta que ya haya un carrusel resbaladizo. Por lo tanto, establezco una variable en 0 y solo la ejecuto sin hacer clic después de que haya cambiado

var slide = 0
if(slide>0)      
$(''#ui-id-1'').slick(''unslick'');

        $.ajax({
            //do stuff, here
        },
        success: function( data ) {

            $(''#ui-id-1'').slick();
            slide++;

        }

Answer 10

$(''#slick-slider'').slick(''refresh''); //Working for slick 1.8.1