1

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

    }

} });

inicial.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>

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; }
2
  • Não está faltando /> nesses img src?
    – Piovezan
    Commented 31/12/2019 às 0:27
  • Eu corrigi isso também, mas não resolveu.
    – Barraviera
    Commented 1/01/2020 às 5:23

1 Resposta 1

1

A função size() foi removida a partir da versão 3.0 do jQuery conforme documentação.

No lugar dela, para verificar se existe a próxima imagem você pode utilizar length.

A verificação deve ser: if($('.ativo').next().length){

Como não sei qual versão do jQuery está usando, o problema pode ser esse. Testei aqui apenas substituindo size() por length e deu certo.

2
  • Estou usando o jquery 3.3.1 slim. Eu já havia tentado também usar o length(), porém sem sucesso. Onde eu posso estar errando?
    – Barraviera
    Commented 1/01/2020 às 5:24
  • Amigo, a sua dica deu certo! Usei o length no lugar do size, mas também tive que trocar a versão do jquery e utilizar a 3.4.1 para funcionar.
    – Barraviera
    Commented 1/01/2020 às 5:40

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .