wake-up-neo.net

Initialisieren Sie Slick js nach erfolgreichem Ajax-Aufruf neu

Ich verwende Slick für eine Karussellimplementierung und alles funktioniert gut, wenn die Seiten geladen werden. Was ich erreichen möchte, ist, dass ich bei einem Ajax-Aufruf zum Abrufen neuer Daten immer noch die Slick-Karussellimplementierung möchte.

Ich habe den Aufruf für Slick in eine Funktion gestellt

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

und dann rufe ich die Funktion in meinem Erfolgsrückruf auf

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

Die Funktion wird jedoch nicht aufgerufen. Wie kann ich diese Js neu initialisieren?

18
Richlewis

Sie sollten die Unlick-Methode verwenden:

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 */
  }
});
16
Minoru

Das sollte funktionieren.

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

Der beste Weg ist, den Slick-Slider zu zerstören, nachdem er neu initialisiert wurde.

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

Ich musste das Karussell lösen, bevor der Ajax-Anruf beginnt, aber das ist erst möglich, wenn es ein glattes Karussell gibt. Also setze ich eine Variable auf 0 und renne sie erst nach einer Änderung

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

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

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

        }
3
A.Clifford

Hinweis: Ich bin nicht sicher, ob dies richtig ist, aber Sie können es ausprobieren und sehen, ob dies funktioniert.

Es gibt eine unslick-Methode, mit der das Karussell de-initialisiert wird. Versuchen Sie es daher, bevor Sie es erneut initialisieren.

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

Hoffe das hilft.

3
web-nomad

Der beste Weg wäre, die Einstellung oder Funktion von unslick (abhängig von Ihrer Slick-Version) wie in den anderen Antworten angegeben zu verwenden, was aber bei mir nicht funktioniert hat. Ich bekomme einige Fehler von Slick, die sich auf this beziehen.

Was bisher jedoch funktioniert hat, ist das Entfernen der Klassen slick-initialized und slick-slider aus dem Container, bevor Slick erneut initialisiert wird:

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

Das Entfernen der Klassen scheint das Zerstörungsereignis nicht zu initiieren (nicht getestet, ist aber sinnvoll), bewirkt jedoch, dass sich der spätere Aufruf von slick() richtig verhält. Solange Sie keine Auslöser für destroy haben, sollten Sie gut sein.

2
Tejas Kemkar

Ich war mit einem Problem konfrontiert, bei dem das Slick-Karussell nicht mit neuen Daten aktualisiert wurde. Es wurden neue Folien an frühere angehängt. Ich habe eine Antwort gefunden, die mein Problem gelöst hat. Es ist sehr einfach.

versuchen Sie es mit einem Klick, weisen Sie Ihre neuen Daten zu, die in einem glatten Karussell gerendert werden, und initialisieren Sie dann Slick erneut. Das waren die Schritte für mich:

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

Hinweis: Überprüfen Sie die Slick-Website auf Syntax. Vergewissern Sie sich auch, dass Sie die Funktion "unlick" nicht verwenden, bevor Slick überhaupt initialisiert wird. Dies bedeutet einfach "initialize" (wie hier: jquery('.my-class').slick({options}). Der erste Ajax-Aufruf und sobald er initialisiert ist, folgen Sie den obigen Schritten

1
Junaid

Auf geht's, Jungs! Es hat mir geholfen

$('.slick-slider').not('.slick-initialized').slick({
   infinite: false,
   slidesToShow: 1,
   slidesToScroll: 1,
   dots: true,
   arrows: false,
   touchThreshold: 9
});
1
Dmitry Shulga
$('#slick-slider').slick('refresh'); //Working for slick 1.8.1
0
Mihir Bhatt

Versuchen Sie diesen Code, es hat mir geholfen!

$('.slider-selector').not('.slick-initialized').slick({
  dots: true,
  arrows: false,
  setPosition: true
});
0
Lahiru Dilshan

Legen Sie nach dem Aufruf einer Anfrage ein Timeout fest, um den Slick-Schieberegler zu initialisieren.

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

Initialisieren Sie den Slick-Slider nicht beim Start. Einfach nach einem AJAX mit Timeout initialisieren. Das sollte für dich funktionieren.

0
Tijan Manandhar