7.2 KiB
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
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ónstartSlider
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 deinterval
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 usandothis
, 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ónstartSlider
.- Debido a que nuestro control deslizante se está reproduciendo actualmente,
$(this).hide();
el botón de reproducción usando$(this).hide();
. Nota: estamos usandothis
, 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();
.