Slick extras
Proporciona skins adicionales para carruseles, configuraciones de ejemplo y herramientas de desarrollo para el módulo de carrusel Slick.
slick_extras
Instalar
composer require 'drupal/slick_extras:^2.0'
Overview
Slick Extras es un módulo complementario para el módulo de carrusel Slick que proporciona skins visuales adicionales, configuraciones de muestra y utilidades de desarrollo. El módulo está diseñado para ayudar a los desarrolladores a aprender cómo usar Slick de manera efectiva y proporcionar temas visuales listos para usar en carruseles.
El módulo principal proporciona seis skins adicionales para carruseles con estilos CSS personalizados que incluyen efectos 3D, diseños con marcos, imágenes redondeadas y navegación con pestañas verticales. Se incluyen dos submódulos: Slick Development para depuración y pruebas de la biblioteca Slick, y Slick Example para proporcionar configuraciones de muestra completas que incluyen múltiples optionsets, estilos de imagen y bloques de Views.
Este módulo está destinado principalmente para propósitos de aprendizaje y desarrollo. Las configuraciones de ejemplo demuestran varios patrones de carrusel Slick incluyendo asNavFor (navegación por miniaturas), carruseles, presentaciones de diapositivas a pantalla completa, diseños de cuadrícula y vistas divididas.
Features
- Seis skins adicionales para carruseles: 3D back, Boxed, Box carousel, Box split, Rounded y VTabs con animaciones CSS personalizadas y diseños
- Submódulo de desarrollo con opciones para alternar entre versiones minificadas y no minificadas de la biblioteca Slick para depuración
- Submódulo de ejemplo con nueve optionsets preconfigurados que demuestran diferentes patrones de carrusel (Main, Carousel, Fullscreen, Grid, Overlay, Split, Slick for, Slick nav, VTabs)
- Siete bloques de Views preconstruidos que muestran configuraciones de asNavFor multivalor, asNavFor simple, asNavFor dividido, carrusel, pantalla completa, cuadrícula y principal
- Seis estilos de imagen optimizados para carruseles Slick (slick, slick_fullscreen, slick_lighbox, slick_rectangle, slick_square, slick_thumbnail)
- Arquitectura de skins basada en plugins que extiende SlickSkinPluginBase para fácil personalización
- Configuraciones de optionset responsivas con ajustes específicos por breakpoint
Use Cases
Aprender la implementación del carrusel Slick
Usa el submódulo Slick Example para entender cómo configurar carruseles Slick. Instala el submódulo después de crear los campos de imagen requeridos, luego examina los optionsets preconfigurados en /admin/config/media/slick y las Views en /admin/structure/views. Clona estas configuraciones para crear tus propios carruseles personalizados.
Aplicar efectos de carrusel 3D
Habilita el módulo Slick Extras y selecciona el skin 'X 3d back' al configurar tu visualización Slick. Este skin añade un efecto de perspectiva 3D con el punto focal en la parte posterior, funcionando mejor con centerMode habilitado y 3 slidesToShow. Los slides adyacentes rotan hacia afuera con transformaciones CSS 3D.
Crear carrusel con marcos y márgenes
Usa el skin 'X Boxed' o 'X Box carousel' para carruseles que necesitan márgenes y relleno alrededor de los slides. Estos skins revelan las flechas en los lados y añaden estilo tipo tarjeta con bordes y efectos hover. Ideal para carruseles de productos o contenido donde cada elemento necesita separación visual.
Construir navegación de miniaturas vertical
Aplica el skin 'X VTabs' para crear una navegación de miniaturas tipo pestañas verticales para tu carrusel principal. Esto crea un panel lateral con miniaturas de desplazamiento vertical, perfecto para galerías de productos o portafolios donde quieres navegación persistente por miniaturas.
Depurar problemas del carrusel Slick
Habilita el submódulo Slick Development y configúralo en /admin/config/media/slick/devel. Activa 'Habilitar modo de desarrollo' para usar el código no minificado de la biblioteca Slick, o usa 'Reemplazar slick.load.js con versión de desarrollo' para depurar la capa de integración de Drupal con registro en consola e información de depuración del viewport.
Crear carruseles sincronizados con asNavFor
Examina los optionsets x_slick_for y x_slick_nav proporcionados por Slick Example. Estos demuestran cómo crear carruseles sincronizados donde hacer clic en una miniatura en un carrusel navega el carrusel principal. Los bloques de Views 'Block: asNavFor Multi-value field', 'Block: asNavFor Single' y 'Block: asNavFor Split' muestran diferentes patrones de implementación.
Tips
- No sobrescribas los ejemplos de muestra directamente. Clónalos en su lugar para que puedas actualizar el módulo más tarde sin perder tus cambios. Usa las características de Clonar de la interfaz de Views y de Slick optionset.
- No recrees desde cero - clona en su lugar. Muchos pasos y opciones no están completamente documentados, y clonar ahorra tiempo significativo incluso para usuarios experimentados de Views.
- Desinstala el módulo Slick Example en producción. Solo sirve como ejemplos sin funcionalidad real. Sin embargo, es seguro mantenerlo si olvidas desinstalarlo.
- Siempre deshabilita la caché durante el trabajo de desarrollo en configuraciones de Slick, de lo contrario los cambios pueden no ser visibles.
- Para diseños de cuadrícula, asegúrate de que el número total de resultados de Views sea mayor que el ajuste de slides visibles, de lo contrario la cuadrícula puede aparecer rota.
- Al usar el skin Grid, establece slidesToShow, Rows y slidesPerRow en 1 y deja que el módulo maneje la cuadrícula vía CSS Foundation b-grid.
Technical Details
Admin Pages 1
/admin/config/media/slick/devel
Configura las opciones de desarrollo y depuración para el carrusel Slick. Esta página permite a los desarrolladores alternar entre versiones de producción y desarrollo de la biblioteca Slick para pruebas y depuración.
Hooks 2
hook_library_info_alter
Implementado por el módulo slick_devel para alterar las definiciones de la biblioteca Slick según los ajustes de desarrollo, permitiendo alternar entre versiones minificadas y no minificadas.
hook_help
Implementado por el módulo slick_example para mostrar el contenido del README.md en la página de ayuda del módulo.
Troubleshooting 4
Asegúrate de que los campos de imagen 'field_image' (valor único) y 'field_images' (multivalor/ilimitado) existan en al menos un tipo de contenido antes de intentar instalar el submódulo Slick Example. Estos campos son requeridos por la configuración de Views.
Asegúrate de tener contenido con imágenes en el campo field_images. Genera contenido de prueba usando el módulo Devel generate. Coloca los bloques Slick X: Views en una región amplia y verifica los ajustes de filtro de Views en /admin/structure/views/view/slick_x/edit.
Los skins se almacenan en caché permanentemente. Limpia todas las cachés vía /admin/config/development/performance o usa drush cr para ver los skins recién añadidos de este u otros módulos.
Las Views de muestra incluyen texto del Body como leyendas. Si tu texto del Body contiene HTML, puede estar incorrectamente cortado causando problemas de diseño. Ajusta los ajustes del campo de Views para manejar correctamente el HTML o elimina el campo de texto del Body de la visualización.