Como criar um slider de imagem com JavaScript para ampliar seu site

Por
Twittar
Compartilhar
Compartilhar
Pin

Você já se encontrou em uma situação em que deseja exibir várias imagens/vídeos em uma seção de uma página da web, mas não quer ocupar muito espaço? Você quer adicionar interatividade às suas páginas da web ou torná-las mais atraentes?

Um controle deslizante de imagem pode poupar o esforço. Neste artigo, definiremos um controle deslizante de imagem, os pré-requisitos para criar um controle deslizante de imagem e como criar um usando HTML, JavaScript e CSS.

O que é um controle deslizante de imagem?

Sliders são carrosséis ou apresentações de slides que exibem textos, imagens ou vídeos. Este artigo se concentrará nos controles deslizantes de imagem. A maioria dos desenvolvedores da web usa controles deslizantes na página inicial para mostrar as ofertas ou as informações mais importantes.

Estas são algumas razões pelas quais você deve usar controles deslizantes em suas páginas da web.

  • Melhore a experiência do usuário: uma página da Web ideal deve ser compacta para que os usuários finais não precisem rolar e rolar para obter dados importantes. Se você tiver várias imagens, poderá poupar aos usuários o incômodo de rolar exibindo-as em um controle deslizante.
  • Apelo visual: a maioria dos usuários do site não gasta muito tempo em uma página da web simples. Você pode melhorar o apelo visual com controles deslizantes e animações.
  • Economize espaço: se você tiver cerca de 20 imagens que deseja exibir em sua página da web, elas podem ocupar muito espaço. A criação de um controle deslizante permitirá que você economize espaço e ainda permita que os usuários acessem todos eles.
  • Exibir conteúdo dinâmico: você pode usar controles deslizantes para exibir conteúdo dinâmico, como incorporações de mídia social, blogs e notícias.

Pré-requisitos para criar um controle deslizante de imagem

  • Uma compreensão básica de HTML: Descreveremos a estrutura do controle deslizante aqui. Você deve se sentir confortável trabalhando com várias tags HTML, classes e divs.
  • Um entendimento básico de CSS: Usaremos CSS para estilizar nossos controles deslizantes e botões de imagem.
  • Um entendimento básico de JavaScript: Usaremos JavaScript para tornar os controles deslizantes de imagem responsivos.
  • Um editor de código: você pode usar o editor de código de sua preferência. Eu estarei usando o Visual Studio Code.
  • Uma coleção de imagens.

Configure a pasta do projeto

Precisamos de uma pasta de projeto, uma pasta de imagens dentro dela e arquivos HTML, CSS e JavaScript. Vou nomear meu projeto “Image-Slider”. Você pode criar seu projeto manualmente ou usar esses comandos para começar;

mkdir Image-Slider

cd Image-Slider

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

Adicione todas as suas imagens à pasta “Imagens” que criamos dentro da pasta do projeto e passe para a próxima etapa.

Esta é a pasta do meu projeto, onde adicionei seis imagens que usarei para criar um slider. Todo o nosso código HTML estará no arquivo index.html.

Tipos de controles deslizantes de imagem

Podemos ter dois tipos de controles deslizantes de imagem; um controle deslizante automático e um controle deslizante de imagem automático com botões.

#1. Controle deslizante automático de imagem

Um controle deslizante automático rola para a próxima imagem automaticamente após um determinado tempo, digamos, por exemplo, 3 segundos.

Código HTML

Este é meu código HTML;

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <link rel="stylesheet" href="https://wilku.top/how-to-create-image-slider-with-javascript-to-amp-up-your-website/styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />


</head>

<body>
  <div id="slider">
    <div class="slide">
        <h1>African</h1>
      <img src="Images/img1.jpg" >
    </div>
    <div class="slide">
        <h1>American</h1>
      <img src="Images/img2.jpg" >
    </div>
    <div class="slide">
        <h1>Asian</h1>
      <img src="Images/img3.jpg" >
    </div>
    <div class="slide">
        <h1>Arabic</h1>
      <img src="Images/img4.jpg" >
    </div>
    <div class="slide">
        <h1>Modern </h1>
      <img src="Images/img5.jpg" >
    </div>
    <div class="slide">
        <h1> European </h1>
      <img src="Images/img6.jpg" >
    </div>
  </div>

  <script src="script.js"></script>


</body>
</html>

A partir desse código, podemos observar o seguinte;

  • Eu importei meu arquivo CSS para index.html na seção . Isso será usado em etapas posteriores.
  • Adicionei JavaScript ao meu código HTML logo antes da tag de fechamento. Usarei JavaScript para adicionar funcionalidade aos controles deslizantes.
  • Cada slide tem uma classe de slide.
  • Usei a tag para importar imagens da pasta Imagens.

Estilize o controle deslizante automático de imagem usando CSS

Agora podemos estilizar nossas imagens, pois já vinculamos arquivos CSS e HTML.

Adicione este código ao seu arquivo CSS;

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

A partir desse código, podemos observar o seguinte;

  • Temos a largura e a altura do nosso controle deslizante para 80%
  • Definimos o slide ativo como bloqueado, o que significa que apenas o slide ativo será exibido enquanto o restante ficará oculto.

Como adicionar JavaScript para tornar o controle deslizante de imagem responsivo

Adicione este código ao 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 JavaScript faz o seguinte;

  • Usamos o seletor document.querySelectorAll para direcionar todos os elementos com uma classe de slide.
  • Damos o valor inicial de currentSlide 0.
  • Definimos o slideInterval como 2000 (2 segundos), o que significa que as imagens no controle deslizante mudam a cada 2 segundos.
  • Este código desliza[currentSlide].className = ‘slide’; remove a aula ativa do slide atual
  • Este código currentSlide = (currentSlide + 1) % slides.length; incrementa o índice do slide atual.
  • Este código desliza[currentSlide].className = ‘slide ativo’; adiciona classe ativa ao slide atual.

O controle deslizante automático funciona da seguinte maneira;

#2. Controle deslizante automático com botões

O controle deslizante de imagem que criamos rola automaticamente a cada 2 segundos. Agora podemos criar uma imagem na qual os usuários podem passar para o próximo slide clicando em um botão ou rolar automaticamente a cada 3 segundos se o usuário não clicar nos botões.

Código HTML

Você pode alterar o conteúdo do arquivo index.html da seguinte maneira;

<!DOCTYPE html>
<html lang="en">
  <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>Image Slider</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
    />
    <link rel="stylesheet" href="https://wilku.top/how-to-create-image-slider-with-javascript-to-amp-up-your-website/styles.css" />
  </head>
  <body>
    <div class="container">

        <div class="mySlides">
            <img src="Images/img1.jpg" style="width:100% ; height:50vh" >
        </div>
      
        <div class="mySlides">
            <img src="Images/img2.jpg" style="width:100% ; height:50vh">
        </div>
      
        <div class="mySlides">
            <img src="Images/img3.jpg" style="width:100% ; height:50vh">
        </div>
      
        <div class="mySlides">
            <img src="Images/img4.jpg" style="width:100% ; height:50vh">
        </div>
      
        <div class="mySlides">
            <img src="Images/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="Images/img1.jpg" style="width:100%" onclick="currentSlide(1)" >
          </div>
          <div class="column">
            <img class="demo cursor" src="Images/img2.jpg" style="width:100%" onclick="currentSlide(2)" >
          </div>
          <div class="column">
            <img class="demo cursor" src="Images/img3.jpg" style="width:100%" onclick="currentSlide(3)" >
          </div>
          <div class="column">
            <img class="demo cursor" src="Images/img4.jpg" style="width:100%" onclick="currentSlide(4)" >
          </div>
          <div class="column">
            <img class="demo cursor" src="Images/img5.jpg" style="width:100%" onclick="currentSlide(5)" >
          </div>
          
        </div>
      </div>

    <script src="script.js"></script>
  </body>
</html>

Esse código HTML funciona da seguinte maneira;

  • Temos uma classe chamada mySlides que carrega nossas cinco imagens.
  • Temos dois botões, “anterior” e “próximo” com um onClick, permitindo que os usuários naveguem pelos slides.
  • Temos uma miniatura que mostra as imagens na parte inferior da página da web.

código CSS

Adicione isso ao seu código;

* {
  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;
}

O código CSS funciona da seguinte maneira;

  • Definimos a propriedade de exibição da classe .mySlides como nenhum, o que significa que todos os slides estão ocultos por padrão.
  • Definimos a opacidade das miniaturas passando o mouse como 1 por meio da regra ativa .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;
}

Você pode obter o código-fonte final aqui.

Nosso código JavaScript faz o seguinte;

  • Temos uma função currentSlide com um valor de exibição definido como nenhum. Essa regra permite que nossa página da Web exiba apenas o slide atual.
  • Temos uma função plusSlides que 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.000 milissegundos.

Se um usuário usar a guia de navegação, nosso controle deslizante de imagem funcionará da seguinte maneira;

Se o usuário não usar os botões de navegação, o controle deslizante de imagem rolará automaticamente a cada 3 segundos, como segue;

Controle deslizante de imagem de teste e depuração

Erros e erros fazem parte da jornada de um desenvolvedor, e tê-los em seu código não significa que você seja um mau desenvolvedor. Se o seu código não estiver funcionando mesmo depois de seguir as etapas mencionadas acima, tente estas opções de teste e depuração para corrigir os erros:

  • Depure cada arquivo separadamente: nosso código tem três arquivos, arquivos HTML, CSS e JavaScript. As três línguas têm regras diferentes. Você pode verificar se seus códigos HTML, CSS e JavaScript são válidos usando ferramentas como W3C Markup Validation Service para HTML, CSS Validator para seu código CSS e Chrome DevTools para testar seu código JavaScript.
  • Realize diferentes tipos de teste: você pode fazer testes visuais para garantir que as imagens sejam exibidas corretamente, testes de desempenho para verificar se as imagens são responsivas e testes funcionais para garantir que as imagens sejam navegáveis.
  • Teste seu código com diferentes formatos e tamanhos de imagem: um bom controle deslizante de imagem deve funcionar com diferentes formatos e tamanhos de imagem.
  • Automatize seus testes: a automação está em toda parte e você também pode se beneficiar dela nos testes. Você pode usar ferramentas como Selenium ou LoadRunner para escrever e executar scripts de automação de teste. Essas ferramentas também permitem que você reutilize alguns de seus testes.
  • Documente seus testes: o teste é um processo contínuo. Você pode ter que continuar melhorando seus testes até que seu código funcione conforme o esperado. Documente esse processo para tornar seu código legível e fácil de consultar.

Controles deslizantes de imagem: práticas recomendadas

  • Mantenha as coisas simples: os controles deslizantes são atraentes. No entanto, mantenha baixo o número de imagens em um controle deslizante. Algo como 4-7 imagens por slide é o ideal.
  • Teste seus controles deslizantes: teste-os quanto à funcionalidade antes de publicá-los online.
  • Crie controles deslizantes responsivos: verifique se os controles deslizantes criados respondem a diferentes tamanhos de tela.
  • Use imagens de alta qualidade: tire/baixe imagens de alta qualidade para seus controles deslizantes. Salvar suas imagens no formato SVG é uma abordagem incrível, pois elas não perdem a qualidade quando você as redimensiona.
  • Redimensione suas imagens: você pode ter diferentes tamanhos e formatos de imagem. Certifique-se sempre de que as imagens em um controle deslizante sejam do mesmo tamanho. Você pode conseguir isso através do CSS.

Empacotando

Esperamos que agora você possa criar um controle deslizante de imagem totalmente funcional para exibir dados importantes em seu site sem usar estruturas de interface do usuário. Você pode usar a mesma abordagem para criar controles deslizantes de vídeo em páginas da web.