¿Qué es un control deslizante de imagen?
Image Slider o Image Carousel es una forma conveniente de mostrar múltiples imágenes en un sitio web. Las imágenes atractivas y llamativas pueden atraer a muchos visitantes al sitio. La siguiente imagen muestra un control deslizante de imagen de muestra:
En esta publicación, crearemos el control deslizante de la imagen de arriba usando HTML, CSS y JavaScript. Comencemos con la creación del control deslizante de la imagen.
Paso – 1 : Cree la estructura del control deslizante de imágenes usando HTML e inserte imágenes de las fuentes respectivas. A continuación se muestra el código HTML completo para hacer esto:
<!--HTML Code--> <!-- Slideshow Container Div --> <div class="container"> <!-- Full-width images with caption text --> <div class="image-sliderfade fade"> <img src="img1.jpg" style="width:100%"> <div class="text">Image caption 1</div> </div> <div class="image-sliderfade fade"> <img src="img2.jpg" style="width:100%"> <div class="text">Image caption 2</div> </div> <div class="image-sliderfade fade"> <img src="img3.jpg" style="width:100%"> <div class="text">Image caption 3</div> </div> <div class="image-sliderfade fade"> <img src="img3.jpg" style="width:100%"> <div class="text">Image caption 4</div> </div> </div> <br> <!-- The dots/circles --> <div style="text-align:center"> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> </div>
Paso – 2 : Una vez que hemos creado la estructura HTML para nuestro control deslizante de imagen, el siguiente paso es diseñar el control deslizante usando CSS. Agregaremos estilos a las imágenes, fondos, etc. También diseñaremos los puntos y haremos que nuestras imágenes sean receptivas y amigables con el navegador usando CSS. A continuación se muestra el código CSS completo para diseñar nuestro control deslizante de imágenes:
// CSS code
*
{
box-sizing: border-box;
}
body
{
font-family: Verdana, sans-serif;
}
.image-sliderfade
{
display: none;
}
img
{
vertical-align: middle;
}
/* Slideshow container */
.container
{
max-width: 1000px;
position: relative;
margin: auto;
}
/* Caption text */
.text
{
color: #f2f2f2;
font-size: 15px;
padding: 20px 15px;
position: absolute;
right: 10px;
bottom: 10px;
width: 40%;
background: rgba(0, 0, 0, .7);
text-align: left;
}
/* The dots/bullets/indicators */
.dot
{
height: 15px;
width: 15px;
margin: 0 2px;
background-color: transparent;
border-color: #ddd;
border-width: 5 px;
border-style: solid;
border-radius: 50%;
display: inline-block;
transition: border-color 0.6s ease;
}
.active
{
border-color: #666;
}
/* Animation */
.fade
{
-webkit-animation-name: fade-image;
-webkit-animation-duration: 1.5s;
animation-name: fade-image;
animation-duration: 1.5s;
}
@-webkit-keyframes fade-image
{
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade-image
{
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px)
{
.text {font-size: 11px}
}
Paso – 3 : Después de agregar estilos al control deslizante, lo último que queda es usar javascript para agregar la funcionalidad de cambio automático de imágenes después de un intervalo de tiempo específico.
En el fragmento de código a continuación, al principio, tomamos todos los elementos div con el nombre de clase ‘image-sliderfade’ en una array e hicimos lo mismo para los div con el nombre de clase ‘puntos’ usando el oyente getElementByClassName(). Después de eso, configuramos la visualización de todos los divs que contienen imágenes. En el último ciclo for, hemos borrado el nombre de la clase para cada elemento de la array dots[]. Una vez que hayamos terminado con estos, configuramos la visualización como un bloque de la imagen que se muestra y agregamos el nombre de la clase al elemento correspondiente de la array dots[]. La función setTimeout se usa para llamar a la función showslides() en un intervalo de 2 segundos.
A continuación se muestra el código JavaScript completo:
var slideIndex = 0;
showSlides(); // call showslide method
function showSlides()
{
var i;
// get the array of divs' with classname image-sliderfade
var slides = document.getElementsByClassName("image-sliderfade");
// get the array of divs' with classname dot
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
// initially set the display to
// none for every image.
slides[i].style.display = "none";
}
// increase by 1, Global variable
slideIndex++;
// check for boundary
if (slideIndex > slides.length)
{
slideIndex = 1;
}
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";
// Change image every 2 seconds
setTimeout(showSlides, 2000);
}
Una vez que hayamos terminado con todos los pasos anteriores, subiremos el control deslizante y trabajaremos como se muestra a continuación:
Publicación traducida automáticamente
Artículo escrito por Saptarshi_Das y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA