Carousel automatico

Olá Coders! Uma dúvida

Gostaria de uma ajuda se possível, como crio um carousel automático, que move as imagens da direita para a esquerda com loop? :grin:

10 Likes

Tem várias formas de criar o carrossel. Olha essa daqui usando CSS e Javascript: How To Create a Slideshow

3 Likes

Depende do framework, pois podes escolher um que funciona num determinado framework. Mas vê no site:
https://www.npmjs.com

Exemplo:

3 Likes

Esse carousel automático é incrível!
Usava sempre um plugin no Wordpress quando queria adicionar um à minha página e agora vou conseguir criar o meu próprio!!

2 Likes

Dá pra fazer de váaarias formas, com JS puro ou usando bibliotecas prontas, que vão te ajudar a não precisar codar tanto pra conseguir um resultado legal. Dá uma olhadinha nesse link, ele mostra algumas dessas possibilidades.
Como o nunrib comentou, se você for usar uma dessas bibliotecas, o modo de aplicar vai depender do framework. Por exemplo, se você escolhe usar o JQuery, tem a Owl Carousel, que é uma biblioteca customizável e já te dá meio caminho andado, você só precisa adaptar às suas necessidades (daí é só seguir a documentação).
Se você quiser usar outras frameworks, como o React, pode procurar no google “React carousel” e vai encontrar várias opções :slightly_smiling_face:

3 Likes

Bom dia @fhenriquevr, tudo bom?
Eu separei um tempinho aqui da minha manhã pra te ajudar a entender a lógica do negócio.

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Carrousel HC</title>
    <style>
      /* Normalizando todo o HTML */
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      /* Definindo o tamanho máximo das imagens para ocupar toda a tela */
      img {
        max-width: 100%;
        object-fit: contain;
      }
      /* Deixando uma imagem do lado da outra */
      .carrousel__wrapper {
        display: flex;
        align-items: center;
        overflow-x: hidden;
      }
    </style>
  </head>
  <body>
    <header>
      <a href="#">Branding</a>
    </header>
    <section class="carrousel">
      <div class="carrousel__wrapper">
        <img src="./assets/1.jpg" class="carrousel__wrapper-item" />
        <img src="./assets/2.jpg" class="carrousel__wrapper-item" />
        <img src="./assets/3.jpg" class="carrousel__wrapper-item" />
      </div>
    </section>
    <script>
      // Definindo o array contendo todas as imagens
      const images = document.querySelectorAll(".carrousel__wrapper-item");
      //   Selecionando o wrapper que está encapsulando todas as imagens para fazermos a manipulação da pos X
      const imageWrapper = document.querySelector(".carrousel__wrapper");
      //   Iniciando a array para armazenar as informações
      const imagesInfos = [];
      //   Indicador de qual imagem está
      let currentImage = 0;

      // Vamos percorrer todas as imagens e vamos pegar as informações de tamanho e a posição X dela no DOM e adicionar na array que iniciamos anteriormente
      images.forEach((image) => {
        imagesInfos.push({
          width: image.width,
          leftPosition: image.scrollLeft,
        });
      });

      //   Setando o intervalo de quantos segundos vamos mudar a imagem
      setInterval(() => {
        //   Incrementando o verificador
        currentImage++;
        // Se o verificador for menor que o total de imagens que possuimos vai scrollar pra esquerdo o tamanho da próxima imagem
        if (currentImage < images.length)
          imageWrapper.scrollTo({
            left: imageWrapper.scrollLeft + images[currentImage].width,
            behavior: "smooth",
          });
        //   Se o verificador já chegar no tamanho máximo, vai ser zerado e voltar a primeira imagem
        if (currentImage === images.length) {
          imageWrapper.scrollTo({ left: 0, behavior: "smooth" });
          currentImage = 0;
        }
      }, 3000);
    </script>
  </body>
</html>

Esse código acima é um exemplo de um carrousel responsivo desenvolvido com Javascript e CSS, é bem simples. Tudo começa no HTML, eu sempro uso a questão do wrapper para deixar tudo encapsulado em uma div/section, como preferir e faço a estilização necessária no CSS.

Depois disso, gosto de deixar tudo o mais responsivo possível no JS, conforme for aumentando o número de imagens vai funcionando perfeitamente, pra evitar o máximo de manutenções toda vez que adiciona uma nova imagem e pronto, com o exemplo do código você consegue facilmente adaptar à qualquer layout seu, basta seguir os passos que deixei comentado no bloco de código. :heart:

Ficou alguma dúvida? Da um reply aqui que eu vou te explicando.

5 Likes

Bem simples mesmo, agradeço a ajuda, vou testar. :grinning:

2 Likes

Agradeço @tiemibf vou dar uma olhada nas bibliotecas, obg.

2 Likes

Top mesmo @leonvrdx :raised_hands:t2:

1 Like

Obrigado pela ajuda @nunrib , vou ver sim :v:t2:

1 Like

Super top @mauricio-mds, ajudou bastante, obrigado mano :fist_right:t2: :fist_left:t2:

@filipeborba Que dica incrível! Muito obrigado, vou usar futuramente.

1 Like

Boa pergunta @fhenriquevr , e algo que fica o máximo no projetinho.

1 Like

pra iniciantes (como eu) encontrei um carousel bem legal através do bootstrap, não sei se já testou, mas da uma olhada aqui no [link] Tem vários estilos e o código vem prontinho pra colar. É bem intuitivo e da pra entender facinho que configurações alterar!!!
Bons estudos!

2 Likes

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.