freeCodeCamp

7.0 KiB

Raw Blame History

title	localeTitle
Guide to Build a Sliding Image Gallery	Guia para criar uma galeria de imagens deslizante

Este tutorial irá orientá-lo na construção de um controle deslizante de imagens usando a biblioteca jQuery .

Este tutorial terá quatro partes:

HTML
SCSS
JS
Referências

HTML

Estaremos usando Bootstrap para este tutorial para manter as coisas com bom aspecto, sem gastar muito tempo.

Nossa estrutura será a seguinte:

<div class="container"> 
 
  <!-- The wrapper for our slider --> 
  <div class="slider"> 
    <ul class="slides"><!-- Each image will be inside this unordered list --></ul> 
  </div> 
 
  <div class="buttons"><!-- Pause and play buttons will go in here --></div> 
 
 </div>

Dentro de nossa ul com a classe de slides , teremos o seguinte:

<li class="slide"><img src="#" /></li> 
 <li class="slide"><img src="#" /></li> 
 <li class="slide"><img src="#" /></li> 
 <li class="slide"><img src="#" /></li> 
 <li class="slide"><img src="#" /></li>

Dentro da nossa classe .buttons você deve ter o seguinte:

<button type="button" class="btn btn-default pause"> 
    <span class="glyphicon glyphicon-pause"></span> 
 </button> 
 <button type="button" class="btn btn-default play"> 
    <span class="glyphicon glyphicon-play"></span> 
 </button>

Aqui está um exemplo de como o seu html deve ser:

Nota: Você deve substituir o atributo image src pelo seu próprio conteúdo.

<div class="container"> 
 
  <div class="slider"> 
    <ul class="slides"> 
      <li class="slide"><img src="https://unsplash.it/1280/720/?image=120" /></li> 
      <li class="slide"><img src="https://unsplash.it/1280/720/?image=70" /></li> 
      <li class="slide"><img src="https://unsplash.it/1280/720/?image=50" /></li> 
      <li class="slide"><img src="https://unsplash.it/1280/720/?image=170" /></li> 
      <li class="slide"><img src="https://unsplash.it/1280/720/?image=190" /></li> 
    </ul> 
  </div> 
 
  <div class="buttons"> 
    <button type="button" class="btn btn-default pause"> 
      <span class="glyphicon glyphicon-pause"></span> 
    </button> 
    <button type="button" class="btn btn-default play"> 
      <span class="glyphicon glyphicon-play"></span> 
    </button> 
  </div> 
 
 </div>

SCSS

Estamos usando o Sass e a sintaxe do SCSS para que possamos aninhar e usar variáveis

Podemos usar o seguinte SCSS para definir nosso estilo:

// Variables 
 $width: 720px; 
 
 .slider { 
  width: $width; 
  height: 400px; 
  overflow: hidden; 
  margin: 0 auto; 
  text-align: center; 
 
  .slides { 
    display: block; 
    width: 6000px; 
    height: 400px; 
    margin: 0; 
    padding: 0; 
  } 
 
  .slide { 
    float: left; 
    list-style-type: none; 
    width: $width; 
    height: 400px; 
 
    img { 
      width: 100%; 
      height: 100%; 
    } 
  } 
 } 
 
 .buttons { 
  margin: 0; 
  width: $width; 
  position: relative; 
  top: -40px; 
  margin: 0 auto; 
 
  .play { 
    display: none; 
  } 
 
  .btn { 
    display: flex; 
    margin: 0 auto; 
    text-align: center; 
  } 
 }

JS

Variáveis

No trecho de código a seguir, definimos variáveis usadas posteriormente em nosso código.

var animationSpeed = 1000; // How quickly the next slide animates. 
 var pause = 3000; // The pause between each slide.

Nós vamos usar uma variável em branco onde vamos chamar o método setInterval :

var interval;

Animação Vamos embrulhar nossas animações deslizantes dentro de uma função:

function startSlider() {}

Estamos usando o método JavaScript nativo setInterval() para automatizar o conteúdo da função em um acionador baseado em tempo.

interval = setInterval(function() {}, pause);

Usamos a variável de pause para ver quantos milissegundos esperar antes de chamar a função novamente. Leia mais sobre o método setInterval nativo aqui: https://developer.mozilla.org/pt-BR/docs/Web/API/WindowTimers/setInterval. Dentro de nossa função, usaremos o jQuery para desbotar entre os slides na velocidade da variável animationSpeed:

$('.slides > li:first') 
  .fadeOut(animationSpeed) 
  .next() 
  .fadeIn(animationSpeed) 
  .end() 
  .appendTo('.slides');

Estamos segmentando o primeiro slide usando $('.slides > li:first') . - .fadeOut(animationSpeed) fará desaparecer o primeiro slide e, em seguida, usando .next() , passamos para o próximo slide. - Uma vez que nos mudamos para o próximo slide, faremos o seguinte em: .fadeIn(animationSpeed) . - Esta sequência continuará até o último slide ( .end() ), então paramos a animação. Vamos agora chamar a função startSlider para iniciar a animação:

startSlider ();

Reproduzir e pausar Esse recurso é opcional, mas muito fácil de implementar. Vamos esconder o botão play, por isso não vemos os botões play e pause:

$('.play').hide(); // Hiding the play button.

Vamos agora criar o nosso botão de pausa (mostrado automaticamente no carregamento da página):

$('.pause').click(function() { 
    clearInterval(interval); 
    $(this).hide(); 
    $('.play').show(); 
 });

Vamos chamar nossa função toda vez que o botão de pausa for clicado usando jQuery. - clearInterval o intervalo usando o método clearInterval e usando nossa variável de interval como parâmetro, indicando qual intervalo interromper. - Como o controle deslizante está pausado, $(this).hide(); o botão de pausa usando $(this).hide(); . Nota: estamos usando this , que se refere ao que nosso pai está chamando, ou seja, .pause . - Em seguida, mostraremos nosso botão de reprodução para que o usuário possa retomar a animação: $('.play').show(); . O código a seguir configura nosso botão de reprodução (ocultado automaticamente no carregamento da página):

('. play'). click (function () { startSlider (); (this) .hide (); $ ('. pause'). show (); });
Vamos chamar nossa função toda vez que o botão de reprodução for clicado usando jQuery.
- Vamos iniciar ou reiniciar o intervalo usando a função startSlider .
- Como o controle deslizante está sendo reproduzido no momento, ocultaremos o botão de reprodução usando $(this).hide(); . Nota: estamos usando this , que se refere ao que nossos pais estão chamando, ie .play .
- Em seguida, mostraremos nosso botão de pausa para que o usuário possa interromper a animação à vontade: $('.pause').show(); .

Referências

Confira o código-fonte e o exemplo no CodePen para este tutorial.

7.0 KiB Raw Blame History Unescape Escape