Estou implementando um carrossel de imagens em javascript, porém a transição de imagens não funciona e fica mostrando somente a primeira imagem "01.jpg". script.js $(function(){ $('#slide img:eq(0)').addClass("ativo").show(); setInterval(slide,3000); function slide(){ //Se a proxima imagem existir if($('.ativo').next().size()){ //Esconde a 1ª img, remove a classe ativo, mostra a proxima img e adiciona a classe ativo nela $('.ativo').fadeOut().removeClass("ativo").next().fadeIn().addClass("ativo"); }else{ //Se for a ultima img do carrosel //Dá fadeOut na img, remove a classe ativo $('.ativo').fadeOut().removeClass("ativo"); //Mostra a 1ª img do carrosel $('#slide img:eq(0)').fadeIn().addClass("ativo"); } } }); inicial.php <figure id="slide"> <img src="armazenamento/galeria/01.jpg"> <img src="armazenamento/galeria/02.jpg"> <img src="armazenamento/galeria/03.jpg"> <img src="armazenamento/galeria/04.jpg"> <img src="armazenamento/galeria/05.jpg"> </figure> estilo.css #slide { width: 500px; overflow: hidden; margin: 10px auto; height: 333px; box-shadow: 0 0 8px #000; position: relative; } #slide img { position: absolute; z-index: 1; display: none; left: 0; }