etechpt.com

Crie Sliders de Imagens Incríveis com HTML, CSS e JavaScript!

Foto do autor

By luis

Aprimore suas Páginas Web com Sliders de Imagens Dinâmicos

Alguma vez desejou exibir múltiplas imagens ou vídeos em uma seção da sua página web sem sobrecarregar o espaço? Ou talvez procurasse adicionar interatividade e tornar suas páginas mais atraentes?

A solução pode estar em um slider de imagens. Neste artigo, vamos explorar o que é um slider de imagens, os requisitos para criar um e como construir um usando HTML, JavaScript e CSS.

O que é um Slider de Imagens?

Sliders, também conhecidos como carrosséis ou apresentações de slides, exibem textos, imagens ou vídeos. Aqui, o foco será nos sliders de imagens. Muitos desenvolvedores web utilizam sliders na página inicial para destacar ofertas ou informações relevantes.

Confira algumas razões para implementar sliders em suas páginas web:

  • Melhorar a Experiência do Usuário: Uma página web eficiente deve ser concisa, evitando que o usuário precise rolar excessivamente para encontrar informações importantes. Um slider organiza as imagens, economizando tempo e esforço do usuário.
  • Apelo Visual: Páginas simples tendem a não reter a atenção dos visitantes por muito tempo. Sliders, com suas animações, podem revitalizar o apelo visual da sua página.
  • Economia de Espaço: Exibir vinte imagens diretamente na página pode consumir muito espaço. Um slider permite mostrar todas as imagens sem comprometer a apresentação.
  • Exibição de Conteúdo Dinâmico: Sliders podem ser usados para exibir conteúdo dinâmico, como posts de redes sociais, blogs e notícias.

Requisitos para Criar um Slider de Imagens

  • Conhecimento Básico de HTML: Iremos construir a estrutura do slider. Familiaridade com tags HTML, classes e divs é fundamental.
  • Conhecimento Básico de CSS: Usaremos CSS para estilizar o slider e os botões.
  • Conhecimento Básico de JavaScript: JavaScript será usado para tornar o slider interativo.
  • Editor de Código: Pode usar o editor de código de sua preferência, como o Visual Studio Code.
  • Coleção de Imagens: Você vai precisar de algumas imagens para o seu slider.

Organizando a Pasta do Projeto

Você precisará de uma pasta principal para o projeto, uma subpasta para as imagens e arquivos HTML, CSS e JavaScript. Sugerimos nomear a pasta principal como “Slider-de-Imagens”. Pode criar manualmente ou usar estes comandos:

mkdir Slider-de-Imagens

cd Slider-de-Imagens

mkdir imagens && touch index.html estilos.css script.js

Adicione suas imagens na subpasta “imagens”.

Este é um exemplo de como a estrutura de pastas pode estar. O arquivo index.html abrigará todo o código HTML.

Tipos de Sliders de Imagens

Existem dois tipos principais de sliders de imagem: o automático e o automático com botões.

#1. Slider de Imagens Automático

Um slider automático transiciona para a próxima imagem após um intervalo definido, por exemplo, a cada três segundos.

Código HTML

Este é um exemplo de código HTML:

    <div id="slider">
      <div class="slide">
        <h1>Paisagem</h1>
        <img src="imagens/img1.jpg" >
      </div>
      <div class="slide">
        <h1>Cidade</h1>
        <img src="imagens/img2.jpg" >
      </div>
      <div class="slide">
        <h1>Montanha</h1>
        <img src="imagens/img3.jpg" >
      </div>
      <div class="slide">
        <h1>Praia</h1>
        <img src="imagens/img4.jpg" >
      </div>
     <div class="slide">
        <h1>Floresta </h1>
        <img src="imagens/img5.jpg" >
      </div>
      <div class="slide">
        <h1>Deserto </h1>
        <img src="imagens/img6.jpg" >
      </div>
    </div>
  
    <script src="script.js"></script>

Observações importantes:

  • O arquivo CSS está vinculado ao index.html dentro da tag <head>.
  • O JavaScript está incluído antes da tag de fechamento <body> para adicionar funcionalidade.
  • Cada imagem está envolvida por um <div> com a classe “slide”.
  • A tag <img src> é usada para referenciar as imagens na pasta “imagens”.

Estilizando o Slider Automático com CSS

Agora que os arquivos HTML e CSS estão vinculados, vamos estilizar as imagens. Insira este código no seu arquivo CSS:

  #slider {
      width: 80%;
    }
    
    .slide {
      width: 80%;
      display: none;
      position: relative;
    }
    
    .slide img {
      width: 80%;
      height: 80%;
    }
    
    .slide.active {
      display: block;
    }

Observações:

  • Definimos a largura do slider em 80%.
  • A classe “active” é usada para exibir apenas o slide ativo, enquanto os outros ficam ocultos.

Adicionando Interatividade com JavaScript

Insira este código no seu arquivo script.js:

  var slides = document.querySelectorAll('.slide');
  var currentSlide = 0;
  var slideInterval = setInterval(nextSlide,2000);
  
  function nextSlide() {
    slides[currentSlide].className="slide";
    currentSlide = (currentSlide+1)%slides.length;
    slides[currentSlide].className="slide active";
  }

Este código JavaScript:

  • Usa document.querySelectorAll para selecionar todos os elementos com a classe “slide”.
  • Inicia o currentSlide com o valor 0.
  • Define o slideInterval em 2000 milissegundos (2 segundos), para que as imagens mudem a cada 2 segundos.
  • A função nextSlide remove a classe “active” do slide atual e adiciona ao próximo.

#2. Slider Automático com Botões

O slider anterior faz transições automaticamente. Agora, vamos criar um slider onde o usuário pode navegar pelos slides clicando em botões, e que também terá uma transição automática a cada 3 segundos.

Código HTML

Modifique o conteúdo do arquivo index.html da seguinte forma:

      <div class="container">
          <div class="mySlides">
              <img src="imagens/img1.jpg" style="width:100% ; height:50vh" >
          </div>
          <div class="mySlides">
              <img src="imagens/img2.jpg" style="width:100% ; height:50vh">
          </div>
          <div class="mySlides">
              <img src="imagens/img3.jpg" style="width:100% ; height:50vh">
          </div>
          <div class="mySlides">
              <img src="imagens/img4.jpg" style="width:100% ; height:50vh">
          </div>
          <div class="mySlides">
              <img src="imagens/img5.jpg" style="width:100% ; height:50vh">
          </div>

          <a class="prev" onclick="plusSlides(-1)">❮</a>
          <a class="next" onclick="plusSlides(1)">❯</a>

          <div class="caption-container">
            <p id="caption"></p>
          </div>

          <div class="row">
            <div class="column">
              <img class="demo cursor" src="imagens/img1.jpg" style="width:100%" onclick="currentSlide(1)" >
            </div>
            <div class="column">
              <img class="demo cursor" src="imagens/img2.jpg" style="width:100%" onclick="currentSlide(2)" >
            </div>
            <div class="column">
              <img class="demo cursor" src="imagens/img3.jpg" style="width:100%" onclick="currentSlide(3)" >
            </div>
            <div class="column">
              <img class="demo cursor" src="imagens/img4.jpg" style="width:100%" onclick="currentSlide(4)" >
            </div>
            <div class="column">
              <img class="demo cursor" src="imagens/img5.jpg" style="width:100%" onclick="currentSlide(5)" >
            </div>
          </div>
      </div>
      <script src="script.js"></script>

Nesse código:

  • A classe “mySlides” abriga as cinco imagens.
  • Os botões “anterior” e “próximo” com o atributo onclick permitem ao usuário navegar pelos slides.
  • Miniaturas são exibidas na parte inferior da página.

Código CSS

Adicione o seguinte código no seu arquivo CSS:

    * {
      box-sizing: border-box;
    }

    .container {
      position: relative;
    }

    .mySlides {
      justify-content: center;
    }
  
    .cursor {
      cursor: pointer;
    }
  
    .prev,
    .next {
      cursor: pointer;
      position: absolute;
      top: 40%;
      width: auto;
      padding: 16px;
      margin-top: -50px;
      color: rgb(34, 143, 85);
      font-weight: bold;
      font-size: 20px;
      border-radius: 0 3px 3px 0;
      user-select: none;
      -webkit-user-select: none;
    }
  
    .next {
      right: 0;
      border-radius: 3px 0 0 3px;
    }
  
    .prev:hover,
    .next:hover {
      background-color: rgba(0, 0, 0, 0.8);
    }
  
    .caption-container {
      text-align: center;
      background-color: orangered;
      padding: 2px 16px;
      color: white;
    }
  
    .row:after {
      content: "";
      display: table;
      clear: both;
    }
  
    .column {
      float: left;
      width: 16.66%;
    }
  
    .demo {
      opacity: 0.6;
    }
    .active,
    .demo:hover {
      opacity: 1;
    }

Observações sobre o CSS:

  • A propriedade display da classe “.mySlides” é definida como “none” para ocultar todos os slides por padrão.
  • A opacidade das miniaturas ao passar o mouse é definida como 1 através da regra .demo:hover {opacity: 1;}.

Código JavaScript

      let slideIndex = 1;
      showSlides(slideIndex);
  
      function plusSlides(n) {
        showSlides(slideIndex += n);
      }
  
      function currentSlide(n) {
        showSlides(slideIndex = n);
      }
  
      let slideInterval = setInterval(() => {
        plusSlides(1);
      }, 3000);
  
      let slideshowContainer = document.getElementsByClassName('slideshow-container')[0];
      slideshowContainer.addEventListener('mouseenter', () => {
        clearInterval(slideInterval);
      });
  
      slideshowContainer.addEventListener('mouseleave', () => {
        slideInterval = setInterval(() => {
          plusSlides(1);
        }, 3000);
      });
  
      function showSlides(n) {
        let i;
        let slides = document.getElementsByClassName("mySlides");
        let dots = document.getElementsByClassName("demo");
        let captionText = document.getElementById("caption");
        if (n > slides.length) {slideIndex = 1}
        if (n < 1) {slideIndex = slides.length}
        for (i = 0; i < slides.length; i++) {
          slides[i].style.display = "none";
        }
        for (i = 0; i < dots.length; i++) {
          dots[i].className = dots[i].className.replace(" active", "");
        }
        slides[slideIndex-1].style.display = "block";
        dots[slideIndex-1].className += " active";
        captionText.innerHTML = dots[slideIndex-1].alt;
      }

Este código JavaScript:

  • A função currentSlide define o valor de exibição como nenhum. Isso permite que a página mostre apenas o slide atual.
  • A função plusSlides adiciona/subtrai o valor fornecido de slideIndex para determinar qual slide exibir.
  • Se o usuário não clicar nos botões, os slides rolarão automaticamente a cada 3 segundos.

Testando e Depurando o Slider de Imagens

Erros são comuns no desenvolvimento. Se o seu código não estiver funcionando, experimente as seguintes opções para depuração:

  • Depure cada arquivo separadamente: Verifique se seus arquivos HTML, CSS e JavaScript estão válidos usando ferramentas como o W3C Markup Validation Service para HTML, CSS Validator para CSS e o Chrome DevTools para JavaScript.
  • Realize diferentes tipos de teste: Faça testes visuais, de desempenho e funcionais.
  • Teste com diferentes formatos e tamanhos de imagem: Um bom slider deve funcionar com diferentes formatos e tamanhos de imagem.
  • Automatize os testes: Use ferramentas como Selenium ou LoadRunner para automatizar testes.
  • Documente os testes: Mantenha um registro do processo de teste para facilitar a manutenção do código.

Práticas Recomendadas para Sliders de Imagens

  • Mantenha a simplicidade: Evite sobrecarregar o slider com muitas imagens. 4-7 imagens por slider é o ideal.
  • Teste: Verifique a funcionalidade antes de publicar o site.
  • Sliders responsivos: Certifique-se de que os sliders se adaptem a diferentes tamanhos de tela.
  • Use imagens de alta qualidade: Imagens com qualidade superior tornam o slider mais atraente. Salvar suas imagens em formato SVG pode ser uma boa abordagem para evitar a perda de qualidade quando redimensionadas.
  • Redimensione as imagens: Certifique-se de que todas as imagens em um slider sejam do mesmo tamanho. O CSS pode ajudar com isso.

Conclusão

Com este guia, esperamos que você possa criar um slider de imagens funcional para exibir informações importantes no seu site sem a necessidade de frameworks. Você pode aplicar essas técnicas para construir sliders de vídeo também.

Notícias de Tech: Google, Microsoft e LinkedIn – Inovações que Você Precisa Conhecer!

Seu PC está morrendo? Guia completo para verificar a saúde do hardware!