En este artículo, crearemos un control deslizante de imagen usando HTML, CSS y JavaScript,
HTML y CSS diseñan la página HTML con cinco divisiones HTML, flecha izquierda, tres diapositivas y flecha derecha con identificadores o clases como flecha izquierda, diapositiva 1, diapositiva 2, diapositiva 3 y flecha derecha. Al hacer clic en estas flechas, podemos ver estas diapositivas de imágenes usando funciones de JavaScript definidas por el usuario como slideLeft() y slideRight(). Estas funciones usan el método addEventListener() en JavaScript que toma el evento de clic de las flechas para escuchar.
Ejemplo: Sección HTML: Esta sección contiene la parte HTML de la página. Las diapositivas a mostrar se definen con su correspondiente texto.
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>Image Slider</title> <meta name="viewport" content= "width=device-width, initial-scale=1" /> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" /> <script src= "https://code.jquery.com/jquery-3.6.0.min.js "> </script> <link rel="stylesheet" href="style.css" /> <script src="script.js"></script> </head> <body> <div id="arrow-left" class="arrow"></div> <div class="slide slide1"></div> <div class="slide slide2"></div> <div class="slide slide3"></div> <div id="arrow-right" class="arrow"></div> </body> </html>
Sección CSS: esta sección consta de todo el estilo que se usaría para hacer la presentación de diapositivas. Las flechas izquierda y derecha que se utilizarán para mover cada una de las diapositivas se definen configurando las propiedades margin-left y margin-right según sea necesario para cada diapositiva. Esto le da la apariencia de un control deslizante de imagen. Todas las diapositivas tienen una imagen de fondo como URL de las imágenes utilizadas en el control deslizante. El siguiente código es el contenido del archivo «style.css» utilizado en el código HTML anterior.
style.css
.slide {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
width: 100%;
height: 100vh;
overflow-x: hidden;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.slide1 {
background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/20210812221217/pic1.png");
}
.slide2 {
background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/20210812221254/pic2.png");
}
.slide3 {
background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/20210812221322/pic3.png");
}
.arrow {
cursor: pointer;
position: absolute;
top: 50%;
margin-top: -35px;
width: 0;
height: 0;
border-style: solid;
}
#arrow-left {
border-width: 20px 30px 20px 0;
border-color: transparent #fff transparent transparent;
left: 0;
margin-left: 20px;
}
#arrow-right {
border-width: 20px 0 20px 30px;
border-color: transparent transparent transparent #fff;
right: 0;
margin-right: 20px;
}
Sección de JavaScript: esta sección maneja las funciones de JavaScript definidas por el usuario como slideLeft() y slideRight(). Las funciones se utilizan el método addEventListener() en JavaScript, que toma el evento de clic de las flechas para escuchar. El siguiente código es el contenido del archivo «script.js» utilizado en el código HTML anterior.
main.js
let sliderImages = document.querySelectorAll(".slide"),
arrowLeft = document.querySelector("#arrow-left"),
arrowRight = document.querySelector("#arrow-right"),
current = 0;
// Clear all images
function reset() {
for (let i = 0; i < sliderImages.length; i++) {
sliderImages[i].style.display = "none";
}
}
// Initial slide
function startSlide() {
reset();
sliderImages[0].style.display = "block";
}
// Show previous
function slideLeft() {
reset();
sliderImages[current - 1].style.display = "block";
current--;
}
// Show next
function slideRight() {
reset();
sliderImages[current + 1].style.display = "block";
current++;
}
// Left arrow click
arrowLeft.addEventListener("click", function () {
if (current === 0) {
current = sliderImages.length;
}
slideLeft();
});
// Right arrow click
arrowRight.addEventListener("click", function () {
if (current === sliderImages.length - 1) {
current = -1;
}
slideRight();
});
startSlide();
Producción:
Control deslizante de imagen
Publicación traducida automáticamente
Artículo escrito por sifa199910 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA