Carrossel de imagem javascript

Asked

Viewed 1,323 times

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 those img src?

  • I fixed that too, but it didn’t solve.

1 answer

1


The function size() has been removed since version 3.0 of jQuery as per documentation.

Instead, to check if there is the next image you can use length.

The verification shall be: if($('.ativo').next().length){

Since I don’t know which version of jQuery you’re using, the problem could be this. I just tested here by replacing size() for length and it worked.

  • I am using jquery 3.3.1 slim. I had already tried to use length(), but without success. Where I may be missing?

  • Friend, your tip worked! I used length instead of size, but I also had to change the jquery version and use 3.4.1 to work.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.