This content originally appeared on DEV Community and was authored by Gabriel Villacis
Introducción
En este tutorial, aprenderás a agregar un carrusel de imágenes interactivo utilizando JavaScript. Vamos a separar el código JavaScript en un archivo externo para mantener nuestro proyecto organizado y fácil de mantener. Este enfoque también mejora el rendimiento y la estructura del código.
Paso 1: Crear el Archivo JavaScript
-
Crear la carpeta para los scripts:
- Dentro de tu proyecto, crea una carpeta llamada
jspara almacenar los archivos JavaScript.
- Dentro de tu proyecto, crea una carpeta llamada
-
Crear el archivo del carrusel:
- Dentro de la carpeta
js, crea un archivo llamadocarrusel.js.
- Dentro de la carpeta
Paso 2: Agregar el Código del Carrusel
- Abre el archivo
carrusel.jsy añade el siguiente código:
// Selecciona todos los slides
let slides = document.querySelectorAll('.slide');
let currentIndex = 0;
// Función para mostrar el slide actual y ocultar los demás
function showSlide(index) {
slides.forEach((slide, i) => {
slide.style.display = (i === index) ? 'block' : 'none';
});
}
// Mostrar el primer slide al cargar la página
showSlide(currentIndex);
// Función para ir al siguiente slide
function nextSlide() {
currentIndex = (currentIndex === slides.length - 1) ? 0 : currentIndex + 1;
showSlide(currentIndex);
}
// Función para ir al slide anterior
function prevSlide() {
currentIndex = (currentIndex === 0) ? slides.length - 1 : currentIndex - 1;
showSlide(currentIndex);
}
// Asignar los eventos a los botones
document.getElementById('next').addEventListener('click', nextSlide);
document.getElementById('prev').addEventListener('click', prevSlide);
// Cambiar automáticamente los slides cada 5 segundos
setInterval(nextSlide, 5000);
Explicación del Código:
- El script selecciona todos los elementos con la clase
.slidey controla cuál se muestra y cuál se oculta. - Las funciones
nextSlideyprevSlidepermiten navegar entre las imágenes al hacer clic en los botones. - Además, el carrusel se mueve automáticamente cada 5 segundos gracias a
setInterval().
Paso 3: Modificar el HTML para Enlazar el Archivo JavaScript
- Abre tu archivo
index.html. - En la sección
<head>, asegúrate de tener el enlace a la hoja de estilos, pero el enlace al archivo JavaScript lo agregaremos al final del documento, justo antes de cerrar el cuerpo (</body>).
Enlace al archivo carrusel.js:
<script src="js/carrusel.js"></script>
Posición recomendada en el HTML:
Coloca este código justo antes de la etiqueta de cierre </body>:
<!-- Otros scripts y contenido -->
<script src="js/carrusel.js"></script>
</body>
</html>
Esto asegura que el DOM esté completamente cargado antes de que el script se ejecute, lo que evita errores al intentar acceder a los elementos del documento.
Paso 4: Probar el Carrusel
- Guarda todos los archivos y abre el archivo
index.htmlen tu navegador. - Verifica que el carrusel funcione correctamente al hacer clic en los botones de navegación y que las imágenes cambien automáticamente cada 5 segundos.
Conclusión
Has creado con éxito un carrusel de imágenes interactivo y lo has incluido en tu proyecto de Iniciativas Ecológicas utilizando JavaScript en un archivo externo. Esto no solo mejora la estructura del proyecto, sino que también permite que el código sea reutilizable y más fácil de mantener.
This content originally appeared on DEV Community and was authored by Gabriel Villacis
Gabriel Villacis | Sciencx (2024-09-24T23:43:44+00:00) Mapa de Iniciativas Ecológicas: JavaScript (Parte 3). Retrieved from https://www.scien.cx/2024/09/24/mapa-de-iniciativas-ecologicas-javascript-parte-3/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.