Slick Slider Karussell startet vor dem Laden der Seite

Question

Ändern Sie meine Frage und hoffe, dass jemand helfen kann. Ich habe Slick Slider eingerichtet. Verwenden Sie auch die Funktion "Tab" von Foundation Zurb, sodass eine Seite mit Tabs oben zur Navigation geöffnet wird. Da die gesamte Seite geladen wird, beginnt alles, was durch diese anfängliche Seitenladung ausgelöst wird (z. B. der Schieberegler), zu laufen, selbst wenn die Personen nicht auf diese Registerkarte schauen - und bevor die Bilder selbst vollständig geladen werden. Was ich brauche ist, dass der Slider eine Autorotation durch den Dia-Satz startet und auf der ersten Folie stoppt, wenn ein Zyklus abgeschlossen ist. Der Schieberegler selbst funktioniert - es ist diese Startfunktion, die ich nicht weiß. Ich würde erwarten, dass es einen Weg gibt, dies im Funktionsaufruf für den eigentlichen Slider zu tun, aber ich weiß einfach nicht, was Javascript zu benutzen hat.

Mein Funktionsaufruf für den Slider ist wie folgt. Wenn die Benutzer jedoch auf die Registerkarte klicken, wird sie auf Folie 1 gestartet. Die Folie wird jedoch nie angezeigt, da sie immer noch versucht, die Bilder zu laden, nachdem sich jemand auf diese Seite bewegt hat. Es öffnet dann die Folie 2 und endet korrekt, indem es die verbleibenden Folien durchläuft und zu einem zurückkehrt.

<script type="text/javascript"> 
var item_length = $('.slide > div').length - 1; 
var slider = $('.slide').slick({ 
autoplay: true, 
autoplaySpeed: 5000, 
dots: true, 
infinite: false, 
speed: 2000, 
fade: true, 
slide: 'div', 
onAfterChange: function(){ 
//check the length of total items in .slide container 
//if that number is the same with the number of the last slider 
//Then pause the slider 
if(item_length == slider.slickCurrentSlide()){ 
//this should do the same thing -> slider.slickPause(); 
slider.slickSetOption("autoplay",false,false) 
}; 
} 
}); 
</script> 

Answer 1

Versuchen Sie Ihr Skript innerhalb load Funktion von jQuery hinzufügen. Diese Callback-Funktion wird erst ausgeführt, wenn das DOM bereit und alle Ressourcen geladen sind.

<script type = "text/javascript"> 
$(window).load(function() { 
    var item_length = $('.slide > div').length - 1; 
    var slider = $('.slide').slick({ 
     autoplay: true, 
     autoplaySpeed: 5000, 
     dots: true, 
     infinite: false, 
     speed: 2000, 
     fade: true, 
     slide: 'div', 
     onAfterChange: function() { 
      //check the length of total items in .slide container 
      //if that number is the same with the number of the last slider 
      //Then pause the slider 
      if (item_length == slider.slickCurrentSlide()) { 
       //this should do the same thing -> slider.slickPause(); 
       slider.slickSetOption("autoplay", false, false) 
      }; 
     } 
    }); 
}); 
</script>