Lección: 15 Comó CREAR SLIDE o CAROUSEL de imágenes en nuestra PLATAFORMA con (LARAVEL y MYSQL)FULLSTACK

15 Comó CREAR SLIDE o CAROUSEL de imágenes en nuestra PLATAFORMA con (LARAVEL y MYSQL)FULLSTACK

Duración: 8 min

Módulo: 🏗️ Módulo de Fundamentos y Diseño Base Lección 15 de 18

Descripción

🖼️ Lección 15: Creación de Carrusel (Slide o Carousel) con Slick.js

Esta lección introduce la integración de una librería de terceros llamada Slick (también conocida como Slick Carousel) para crear un carrusel o slide dinámico de imágenes, esencial para mostrar un listado de películas de manera atractiva en la página principal.

1. ⚙️ Introducción a la Librería Slick [00:51]

Se presenta la herramienta elegida para la funcionalidad de carrusel:

Propósito: Slick es una librería de código abierto basada en jQuery que permite implementar diferentes tipos de carruseles con efectos de deslizamiento, auto-reproducción y navegación.
Motivación: Se elige esta herramienta por ser fácil de usar, intuitiva y por simplificar la carga de código para lograr un efecto que de otro modo requeriría mucho más desarrollo en JavaScript y CSS [00:44].
Visualización: Se muestra el sitio web oficial para revisar los múltiples ejemplos de carruseles disponibles, como slides simples, carruseles de imágenes múltiples o sincronizados [01:24].

2. 🧩 Estructura HTML y Configuración [02:40]

El instructor descarga el código fuente de la librería para identificar y simplificar los archivos necesarios, y luego prepara la estructura base:

Identificación del Demo: De los múltiples ejemplos disponibles, se selecciona el tipo de carrusel que muestra varios ítems a la vez (ej. seis películas) en lugar de un slide de una sola imagen [03:23].
Estructura Base: El carrusel requiere una estructura de lista donde cada película o elemento es un <div> que contiene una imagen (<img>). El contenedor principal de estos slides debe tener una clase específica (ej. regular-slider) para que la librería Slick pueda inicializar el carrusel en él [04:48].

3. 🖥️ Uso Básico y Ajustes Iniciales [06:06]

Se realiza la prueba de funcionamiento usando imágenes de ejemplo:

Visualización: Tras copiar las imágenes de prueba, se verifica que la estructura del carrusel esté funcionando correctamente, con las imágenes deslizándose y los botones de navegación activos [06:11].
Ajuste CSS (Opcional): Se demuestra que al quitar una regla CSS que agregaba opacidad a las imágenes, se mejora la visibilidad y el resultado es más limpio y profesional [06:50].
Configuración en JavaScript: Se muestra que el comportamiento del carrusel (por ejemplo, cuántas imágenes mostrar al mismo tiempo) se define mediante parámetros de configuración dentro del código JavaScript de la librería [07:12]. Se ejemplifica el cambio para que se visualicen seis imágenes por diapositiva [07:31].

La lección concluye con el carrusel listo para ser incorporado en la vista principal, faltando solo la integración de los archivos CSS y JS necesarios para que la librería funcione en el entorno Laravel.

Apoya este proyecto

Si te gusta nuestro contenido, ¡apóyanos con una donación!

Donar por Airtm Donar por Binance

¡Gracias por tu apoyo! ❤️

Hilari Web