Slick js nach erfolgreichem Ajax-Aufruf neu initialisieren

Lesezeit: 3 Minuten

Benutzer-Avatar
Richlewis

Ich verwende Slick für eine Karussellimplementierung und alles funktioniert gut, wenn die Seiten geladen werden. Was ich erreichen möchte, ist, dass ich, wenn ich einen Ajax-Aufruf mache, um neue Daten abzurufen, immer noch die glatte Karussellimplementierung haben möchte, im Moment verliere ich sie.

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

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

und dann rufe ich die Funktion in meinem Erfolgs-Callback auf

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

Aber die Funktion wird nicht aufgerufen. Wie kann ich dieses js neu initialisieren?

  • erreicht das Programm den Erfolgsfunktionshandler?

    – Web-Nomade

    6. Januar 2015 um 9:34 Uhr

  • Ja, das tut es, könnte ich also etwas übersehen?

    – Richlewis

    6. Januar 2015 um 9:37 Uhr

  • Da das Karussell bereits initialisiert ist, müssten Sie diesen Ereignishandler entfernen, bevor Sie ihn erneut initialisieren. Nur eine Vermutung

    – Web-Nomade

    6. Januar 2015 um 9:39 Uhr

  • Entschuldigung, wenn dies eine dumme Frage ist, aber könnten Sie bitte ein Beispiel geben

    – Richlewis

    6. Januar 2015 um 9:42 Uhr

  • siehe bitte meine antwort

    – Web-Nomade

    6. Januar 2015 um 9:46 Uhr

Benutzer-Avatar
Kleiner

Sie sollten die Unslick-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 */
  }
});

  • für mich musste ich verwenden $('.slick-media').slick('unslick').slick('reinit');

    – Josef Marikle

    22. Januar 2016 um 18:35 Uhr

  • Das hat bei mir funktioniert, @JosephMarikle gibt es Dokumente zu dieser Methode, die ich nicht aufgelistet gesehen habe?

    – Tom Vogel

    30. März 2016 um 7:17 Uhr

  • Es hat meinen Tag gerettet. Vielen Dank

    – Gaurav

    4. Oktober 2016 um 6:35 Uhr

  • In meinem Fall habe ich einfach die Größe des Fensters geändert und dabei von 2 Folien zu 1 gewechselt. Das einfache Aufrufen der Funktion .slick() hat nicht funktioniert. Ich habe jedoch .slick(‘unslick’); Führen Sie dann die Funktion slick() erneut aus. Funktioniert perfekt

    – Meer26.2

    2. Dezember 2017 um 20:32 Uhr


Benutzer-Avatar
Chirag Prajapati

Der beste Weg ist, den Slick-Slider nach der Neuinitialisierung zu zerstören.

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

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

Das sollte funktionieren.

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

Probieren Sie diesen Code aus, er hat mir geholfen!

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

Benutzer-Avatar
Gemeinschaft

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

Da ist ein unslick Methode, die das Karussell deinitialisiert, also könnten Sie versuchen, diese zu verwenden, bevor Sie es neu 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.

Benutzer-Avatar
A. Clifford

Ich musste das Karussell auflösen, bevor der Ajax-Aufruf beginnt, aber das geht nicht, bis es bereits ein glattes Karussell gibt. Also setze ich eine Variable auf 0 und laufe nur unslick, nachdem sie sich geändert hat

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

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

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

        }

1179570cookie-checkSlick js nach erfolgreichem Ajax-Aufruf neu initialisieren

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy