Faire une série de photos en fondu enchaîné sur une page Web en utilisant Slick

Question

Je voudrais qu'une série de trois images se fondent et se déchaînent automatiquement en boucle sur la page Web sans aucune intervention de la part de l'utilisateur. Sur la suggestion dans les commentaires, j'ai décidé d'utiliser la bibliothèque Slick et ont généré le code suivant:

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

Il fonctionne très bien pour un cycle, puis il rompt complètement avec des images vacillantes et noircissent. Est-ce que quelqu'un sait comment y remédier?

Answer 1

J'ai été capable d'utiliser le code de ce violon pour atteindre mes objectifs. Tout ce que j'avais à faire était de retravailler quelques unes des méthodes, mais c'est exactement ce dont j'avais besoin.

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

Le JavaScript se résume à:

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