Erstellen einer Serie von Fotos nacheinander auf einer Webseite mit Slick

Question

Ich möchte eine Reihe von drei Bildern automatisch ein- und ausblenden über und über Schleifen auf der Webseite ohne Benutzereingaben. Nach dem Vorschlag in den Kommentaren habe ich die Slick-Bibliothek zu verwenden, entschieden und haben Sie den folgenden Code erzeugt:

$('.fade').slick({ 
    accessibility: false, 
    arrows: false, 
    draggable: false, 
    autoplay: true, 
    autoplaySpeed: 3000, 
    fade: true, 
    speed: 1000, 
    swipe: false, 
    touchMove: false, 
}); 

Es ist für einen Zyklus funktioniert gut, und dann bricht es komplett mit Bildern Flimmern und schwarz drehen. Weiß jemand, wie man das behebt?

Answer 1

Ich konnte Code aus dieser Fiddle verwenden, um meine Ziele zu erreichen. Alles, was ich tun musste, war einige der Methoden etwas zu überarbeiten, aber das ist genau das, was ich brauchte.

http://jsfiddle.net/pdb4kb1a/2/

Das JavaScript läuft darauf hinaus:

var imgArray = [ 
    'http://placehold.it/300x200', 
    'http://placehold.it/200x100', 
    'http://placehold.it/400x300'], 
    curIndex = 0; 
    imgDuration = 3000; 
function slideShow() { 
    document.getElementById('slider').className += "fadeOut"; 
    setTimeout(function() { 
     document.getElementById('slider').src = imgArray[curIndex]; 
     document.getElementById('slider').className = ""; 
    },1000); 
    curIndex++; 
    if (curIndex == imgArray.length) { curIndex = 0; } 
    setTimeout(slideShow, imgDuration); 
} 
slideShow();