freeCodeCamp

7.2 KiB

Raw Blame History

title	localeTitle
Guide to Build a Sliding Image Gallery	Guía para construir una galería de imágenes deslizante

Este tutorial lo guiará a través de la construcción de un control deslizante de imagen utilizando la biblioteca jQuery .

Este tutorial tendrá cuatro partes:

HTML
SCSS
JS
Referencias

HTML

Usaremos Bootstrap para este tutorial para que las cosas se vean bien, sin perder mucho tiempo.

Nuestra estructura será la siguiente:

<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 nuestra ul con la clase de slides tendremos lo siguiente:

<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 de nuestra clase .buttons debes tener lo siguiente:

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

Aquí hay un ejemplo de cómo debería verse su html :

Nota: debe reemplazar el atributo src imagen con su propio contenido.

<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 Sass y la sintaxis de SCSS para poder anidar y usar variables

Podemos usar el siguiente SCSS para definir nuestro 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

Variables

En el siguiente fragmento de código, definimos las variables utilizadas más adelante en nuestro código.

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

Usaremos una variable en blanco donde llamaremos al método setInterval :

var interval;

Animación Vamos a envolver nuestras animaciones deslizantes dentro de una función:

function startSlider() {}

Estamos utilizando el método de JavaScript nativo setInterval() para automatizar el contenido de la función en un desencadenante basado en el tiempo.

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

Usamos la variable de pause para ver cuántos milisegundos hay que esperar antes de volver a llamar a la función. Lea más sobre el método nativo de setInterval aquí: https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval. Dentro de nuestra función usaremos jQuery para desvanecerse entre diapositivas a la velocidad de la variable animationSpeed:

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

Nos dirigimos a la primera diapositiva usando $('.slides > li:first') . - .fadeOut(animationSpeed) desvanecerá la primera diapositiva y luego, utilizando .next() , pasamos a la siguiente diapositiva. - Una vez que hayamos pasado a la siguiente diapositiva, la .fadeIn(animationSpeed) en: .fadeIn(animationSpeed) . - Esta secuencia continuará hasta la última diapositiva ( .end() ), luego detendremos la animación. Ahora llamaremos la función startSlider para iniciar la animación:

startSlider ();

Reproducir y pausar Esta función es opcional, pero bastante fácil de implementar. Ocultaremos el botón de reproducción, por lo que no vemos los botones de reproducción y pausa:

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

Ahora crearemos nuestro botón de pausa (que se muestra automáticamente en la carga de la página):

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

Llamaremos a nuestra función cada vez que se haga clic en el botón de pausa utilizando jQuery. - Eliminaremos el intervalo usando el método clearInterval y usando nuestra variable de interval como parámetro, indicando qué intervalo se debe detener. - Debido a que nuestro control deslizante está pausado, $(this).hide(); el botón de pausa usando $(this).hide(); . Nota: estamos usando this , que se referirá a lo que nuestros padres están llamando, es decir, .pause . - Luego mostraremos nuestro botón de reproducción para que el usuario pueda reanudar la animación: $('.play').show(); . El siguiente código configura nuestro botón de reproducción (se oculta automáticamente en la carga de la página):

('. play'). click (función () { startSlider (); (este) .hide (); $ ('. pausa'). show (); });
Llamaremos a nuestra función cada vez que se haga clic en el botón de reproducción utilizando jQuery.
- startSlider o reiniciaremos el intervalo utilizando la función startSlider .
- Debido a que nuestro control deslizante se está reproduciendo actualmente, $(this).hide(); el botón de reproducción usando $(this).hide(); . Nota: estamos usando this , que se referirá a lo que nuestros padres están llamando, es decir, .play .
- Luego mostraremos nuestro botón de pausa para que el usuario pueda detener la animación a voluntad: $('.pause').show(); .

Referencias

Verifique el código fuente y el ejemplo en CodePen para este tutorial.

7.2 KiB Raw Blame History