🎠 Advanced Image Carousel

📖 Descripción Breve

Este proyecto es un carrusel de imágenes avanzado desarrollado con HTML, CSS y JavaScript puro. Permite a los usuarios navegar a través de una colección de imágenes utilizando botones de flecha para moverse hacia adelante o atrás, o seleccionando directamente una imagen específica haciendo clic en su miniatura correspondiente.

El carrusel resuelve el problema de mostrar múltiples imágenes de manera interactiva y atractiva en un espacio limitado, mejorando la experiencia del usuario en galerías de productos, portafolios o presentaciones. Está dirigido a desarrolladores web que buscan una solución ligera y personalizable para integrar en sus proyectos, así como a usuarios finales que desean una navegación intuitiva.

✨ Características Principales

• 🔄 Navegación Bidireccional: Botones de flecha para avanzar y retroceder en el carrusel.
• 🖱️ Selección Directa: Clic en miniaturas para saltar a cualquier imagen.
• 🎨 Interfaz Responsiva: Diseño adaptable que funciona en diferentes tamaños de pantalla.
• ⚡ Transiciones Suaves: Animaciones CSS para una experiencia fluida.
• 🎯 Indicador Activo: Resaltado visual de la miniatura correspondiente a la imagen actual.
• 📱 Compatibilidad Móvil: Funciona en dispositivos táctiles (aunque optimizado para desktop).

🖼️ Demo/Vistas Previas

Para ver el carrusel en acción, simplemente abre el archivo index.html en tu navegador web favorito o visita la demo en vivo. El carrusel mostrará tres imágenes de auriculares (earbuds) con navegación interactiva.

Vista previa del layout:

• Columna izquierda: Miniaturas de las imágenes.
• Columna derecha: Carrusel principal con botones de navegación.

🛠️ Tecnologías Utilizadas

Tecnología	Versión	Descripción
	5	Estructura semántica del documento
	3	Estilos y animaciones
	ES6+	Lógica interactiva
	6.7.2	Iconos para botones de navegación

🚀 Instalación y Configuración

Este proyecto no requiere instalación compleja. Puedes obtener los archivos descargándolos directamente desde el repositorio en GitHub o clonándolo localmente.

Pasos:

1. Clona el repositorio (recomendado para desarrolladores):

   git clone https://github.com/Seb-RM/Javascript_Html_Css-Advance-Image-Carousel.git
   cd Javascript_Html_Css-Advance-Image-Carousel
   

2. O descarga el ZIP: Ve a la página del repositorio en GitHub, haz clic en "Code" > "Download ZIP", y extrae los archivos en un directorio local.

3. Verifica los archivos: Asegúrate de tener index.html, style.css, script.js y la carpeta images/ en el mismo directorio.

4. Abre en navegador: Haz doble clic en index.html o arrastra el archivo a una ventana del navegador.

Requisitos del Sistema:

• Navegador web moderno (Chrome, Firefox, Safari, Edge) con soporte para ES6+.
• Conexión a internet para cargar Font Awesome desde CDN (opcional, puedes descargar localmente si prefieres).

Variables de Entorno:

No aplica, ya que es un proyecto frontend puro sin backend.

📚 Guía de Uso

Uso Básico:

1. Abre index.html en tu navegador.
2. Usa los botones de flecha (izquierda/derecha) para navegar entre imágenes.
3. Haz clic en cualquier miniatura de la columna izquierda para saltar directamente a esa imagen.

Casos de Uso Comunes:

• Galería de Productos: Muestra variaciones de un producto (como diferentes colores de auriculares).
• Portafolio: Presenta trabajos o proyectos con navegación fácil.
• Presentaciones: Avanza a través de diapositivas de manera interactiva.

Configuración Avanzada:

• Para cambiar las imágenes, reemplaza los archivos en la carpeta images/ y actualiza las rutas en index.html.
• Ajusta el tamaño del carrusel modificando las dimensiones en style.css (.slides-container).

⚙️ Explicación Técnica

📁 Archivo: index.html

Propósito: Define la estructura HTML del carrusel, incluyendo el contenedor principal, miniaturas y el área del carrusel con botones de navegación.

Conceptos Clave:

• Estructura semántica con contenedores flexibles.
• Uso de clases CSS para organización.
• Integración de Font Awesome para iconos.
• Vinculación de estilos y scripts externos.

Fragmentos Destacados:

<div class="main-container"> <!-- Contenedor principal con layout flex -->
    <div class="col-1"> <!-- Columna izquierda para miniaturas -->
        <div class="item active"> <!-- Miniatura activa (resaltada) -->
            <img src="./images/ear-buds.png" alt=""> <!-- Imagen de miniatura -->
        </div>
        <!-- Más items... -->
    </div>
    <div class="col-2"> <!-- Columna derecha para carrusel principal -->
        <div class="carousel"> <!-- Contenedor del carrusel -->
            <button id="prevBtn"> <!-- Botón anterior -->
                <i class="fas fa-angle-left"></i> <!-- Icono Font Awesome -->
            </button>
            <!-- Slides container... -->
        </div>
    </div>
</div>

API/DOM:

• Elementos HTML estándar sin manipulación dinámica inicial.
• Los elementos se seleccionan posteriormente por JavaScript usando querySelector y querySelectorAll.

📁 Archivo: style.css

Propósito: Proporciona el diseño visual, layout responsivo y animaciones para el carrusel.

Conceptos Clave:

• CSS Grid y Flexbox para layout.
• Transiciones CSS para animaciones suaves.
• Posicionamiento absoluto para botones de navegación.
• Selectores de clase para estados activos.

Fragmentos Destacados:

.slides-container {
    display: flex; /* Layout horizontal para las diapositivas */
    width: 579px; /* Ancho fijo del contenedor */
    height: 579px; /* Alto fijo del contenedor */
}

/* En updateSlides() se aplican dinámicamente: */
.slides-container {
    transition: all 0.3s ease-in-out; /* Transición suave para movimientos */
    transform: translateX(${-slideWidth * index + 1}px); /* Desplazamiento horizontal basado en índice */
}

API/DOM:

• Manipulación de estilos CSS a través de JavaScript (transform y transition).
• Gestión de clases para indicadores activos (item.active).

📁 Archivo: script.js

Propósito: Implementa la lógica interactiva del carrusel, manejando eventos de clic y actualizando la posición de las diapositivas.

Conceptos Clave:

• Manipulación del DOM para navegación.
• Gestión de estado con variable index.
• Event listeners para interacciones del usuario.
• Transiciones CSS controladas por JavaScript.

Fragmentos Destacados:

function updateSlideIndex(offset) {
    index += offset; // Incrementa/decrementa el índice según offset (+1 o -1)
    if (index < 0) {
        index = slides.length - 1; // Ciclo al último slide si va antes del primero
    } else if (index >= slides.length) {
        index = 0; // Ciclo al primer slide si va después del último
    }
}

function updateSlides() {
    slidesContainer.style.transition = 'all 0.3s ease-in-out'; // Aplica transición suave
    slidesContainer.style.transform = `translateX(${-slideWidth * index + 1}px)`; // Desplaza contenedor horizontalmente
}

nextBtn.addEventListener('click', moveToNextSlide); // Evento para botón siguiente
items.forEach((item, i) => {
    item.addEventListener('click', () => handleItemClick(i)); // Eventos para cada miniatura
});

API/DOM:

• Eventos: addEventListener para clics en botones y miniaturas.
• Manipulación de Estilos: Cambio dinámico de transform y transition en el contenedor de diapositivas.
• Selección de Elementos: querySelector y querySelectorAll para acceder a elementos HTML.
• Flujo de Datos: Entrada (clic) → Procesamiento (actualización de índice) → Salida (transformación visual).

🎯 Arquitectura

El proyecto sigue una arquitectura simple de componentes:

Advanced Image Carousel
├── index.html (Estructura principal)
├── style.css (Estilos y layout)
├── script.js (Lógica interactiva)
└── images/ (Recursos estáticos)
    ├── ear-buds.png
    ├── ear-buds2.png
    └── ear-buds3.png

Patrones de Diseño:

• Separación de Preocupaciones: HTML para estructura, CSS para presentación, JS para comportamiento.
• Event-Driven: La interacción se basa en eventos de usuario.
• Estado Centralizado: Una variable index maneja el estado del carrusel.

Flujo de Datos:

1. Usuario interactúa (clic en botón/miniatura).
2. JavaScript actualiza el índice.
3. Se aplica transformación CSS para mover las diapositivas.
4. Se actualiza el indicador activo en miniaturas.

Este diseño permite fácil mantenimiento y extensión, como agregar más imágenes o nuevas funcionalidades de navegación.