1
I am implementing a javascript image carousel, but the image transition does not work and is showing only the first image "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().length){
//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");
}
} });
initial php.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<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>
css style.
#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; }
Is not missing
/>
in thoseimg src
?– Piovezan
I fixed that too, but it didn’t solve.
– Barraviera