Lección: 68 Comó hacer un CAROUSEL ITEMS en cualquier PÁGINA WEB con (LARAVELyMYSQL)FULLSTACK

68 Comó hacer un CAROUSEL ITEMS en cualquier PÁGINA WEB con (LARAVELyMYSQL)FULLSTACK

Duración: 6 min

Módulo: 🎬 Módulo de Vistas Públicas y Funcionalidades Core Lección 4 de 16

Descripción

🖼️ Lección 68: Implementación de un Carrusel de Ítems en el Frontend

Esta lección avanzada cubre cómo integrar un componente de Carrusel con lógica independiente (scripts y estilos propios) y asegura su correcto funcionamiento tras el despliegue en un servidor de producción.

1. 🎨 Integración del Componente de Carrusel (Frontend) [00:53]

El principal objetivo es reemplazar un slider preexistente y defectuoso por un componente modular que utilice tecnologías estándar de la web.

1.1. 🧹 Limpieza del Código Obsoleto [02:08]

Identificación: Se localizan y eliminan las filas (<div class="row">) y los scripts del carrusel que estaban causando problemas o errores en la vista principal (index.blade.php) del proyecto.

1.2. 💻 Incorporación de Estilos y Estructura [02:29]

Estilos (CSS): Se copia el código CSS específico del nuevo carrusel y se añade al archivo de estilos principal del proyecto (public/css/style.css).
Estructura (HTML): Se pega la nueva estructura HTML del carrusel dentro de index.blade.php, asegurando que contenga la disposición correcta para mostrar la portada y el título de cada ítem (película o canal).

1.3. ⚙️ Desarrollo del Script de Carrusel (JavaScript) [02:58]

Creación del Archivo: Se crea un nuevo archivo de lógica JavaScript llamado carrousel.js y se guarda en el directorio de recursos públicos (public/js/).
Vinculación: Se vincula este nuevo script en el header o footer de la plantilla principal, utilizando la ruta asset de Laravel (<script src="{{ asset('js/carrousel.js') }}">) [03:17].
Función: Este script contiene la lógica necesaria para inicializar el carrusel, manejar las transiciones, y asegurar que los ítems se muevan correctamente, permitiendo visualizar la portada y el título de las películas [03:53].

2. 🚀 Despliegue y Validación en Producción (FTP) [04:18]

Para solucionar el problema inicial de que el carrusel no funcionaba en producción, se utiliza el cliente FTP (FileZilla/WinSCP) para asegurar que todos los archivos modificados lleguen al servidor.

2.1. 📤 Archivos para Transferir

Se transfieren un total de tres archivos, dos de los cuales son nuevos o modificados:

index.blade.php: Contiene la nueva estructura HTML del carrusel [05:21].
style.css: Contiene los nuevos estilos CSS [04:49].
carrousel.js: El nuevo archivo de lógica JavaScript [05:08].

2.2. ✅ Verificación en Producción [05:34]

Una vez que los archivos se sobrescriben en el servidor a través de FTP, se recarga la página en el dominio público.
Resultado: Se confirma que el Carrusel ya está trabajando tanto en el entorno local como en el de producción [05:43], asegurando que la plataforma está lista para adaptarse a todas las categorías.

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