1.CREAR HTML
Creamos un html siguiendo al siguiente estructura basica:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Carrusel</title>
<link rel="stylesheet" href="carrusel.css">
<script src="carrusel.js" defer></script>
</head>
<body>
<section>
<div class="general">
<img src="fotos/izq.jpg" alt="" id="izq">
<img src="fotos/foto1.jpg" alt="" id="img">
<img src="fotos/derecha.png" alt="" id="der">
</section>
</body>
</html>Debemos añadir las etiquetas correspondientes a:
- Unión con el archivo de extensión .js
- Unión con el archivo de extension .css
- Imágenes de flechas para mover el carrusel hacia ambos lados
2.ESTILOS CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
section{
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
.general{
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
#der, #izq{
height: 70px;
}
}
}Debemos centrar el carrusel dentro de nuestro archivo, además asignar un tamaño fijo a las fotos que vamos a utilizar.
Debemos haber creado anteriormente una carpeta para las fotos dentro de la misma carpeta donde tenemos los demás archivos
3.CREACIÓN VARIABLES
let fotos = ["foto1.jpg", "foto2.jpg", "foto3.jpg"];
let x = 0;La creación de estas dos variables es fundamental para el funcionamiento de nuestro carrusel.
La primera variables es una array, crea una lista que podremos recorrer con las fotos que vamos a utilizar.
La segunda variable indica la posición dentro del array según se vaya desarrollando el código, aunque se inicia en 0.
4. CREACIÓN DE FUNCIONES
La primera función nos cambia la imagen cuándo pulsamos en la fecha hacia la izquierda.
document.querySelector("#izq").addEventListener("click", function () {
x--;
if (x < 0) {
x = fotos.length - 1;
}
document.querySelector("#img").setAttribute("src", "fotos/"+fotos[x]);
});Cuando pulsamos en la flecha izquierda nos va a restar una posición, si además hemos llegado la posición negativa irá a la ultima posición de array para continuar, creando así un cambio cíclico.
La segunda funcion nos cambia la imagen cuandi pulsamos en la fecha hacia la derecha.
document.querySelector("#der").addEventListener("click", function () {
x ++;
if (x >= fotos.length) {
x = 0;
}
document.querySelector("#img").setAttribute("src", "fotos/"+fotos[x]);
});
Cuando pulsamos en la flecha derecha nos va a sumar una posición, si además hemos llegado a la última posición volverá a la primera posición de array para continuar, creando así un cambio cíclico.