Splide
Proporciona integración con Splide, la biblioteca de deslizadores JavaScript vanilla ligera, potente y flexible para crear sliders, carruseles y galerías.
splide
Instalar
composer require 'drupal/splide:^2.0'
Overview
Splide es un módulo de Drupal que integra la biblioteca de deslizadores JavaScript vanilla Splide. Proporciona una solución potente y flexible para crear sliders de imágenes responsivos, carruseles y galerías sin requerir jQuery.
El módulo ofrece múltiples formas de crear instancias de Splide: a través de formateadores de Field para campos de imagen, media y referencia a entidades; plugins de estilo de Views para contenido dinámico; y un filtro de texto para incrustar sliders en contenido WYSIWYG. Cuenta con un sistema completo de skins para tematización, navegación por miniaturas (asNavFor), diseños de cuadrícula, y soporta varios tipos de media incluyendo imágenes, videos y audio.
Splide aprovecha el módulo Blazy para carga diferida y proporciona amplia personalización a través de optionsets que pueden crearse y gestionarse mediante una interfaz de administración. La biblioteca soporta características modernas como transiciones loop/fade/slide, reproducción automática, navegación con rueda del ratón, modo pantalla completa, gestos táctiles/deslizamiento, y puntos de ruptura responsivos.
Features
- Integración con la biblioteca de deslizadores JavaScript Splide v4.x - una solución vanilla JS ligera sin dependencia de jQuery
- Múltiples modos de visualización: transiciones Slider, Carousel, Fade y Loop
- Formateadores de Field para campos de Image, Media, File, Entity Reference, Paragraphs y Text
- Plugins de estilo de Views para crear sliders dinámicos con soporte opcional de agrupación
- Filtro de texto para incrustar sliders Splide en contenido WYSIWYG usando shortcodes
- Sistema completo de skins con más de 9 skins incorporados (Default, Classic, Fullscreen, Fullwidth, Grid, Split, Seagreen, Skyblue, etc.)
- Navegación por miniaturas (asNavFor) con opciones de posicionamiento vertical/horizontal
- Soporte de diseño en cuadrícula con CSS Grid Foundation para múltiples elementos por diapositiva
- Configuración extensa de optionsets con más de 50 opciones JavaScript para personalización
- Puntos de ruptura responsivos con anulaciones de opciones por punto de ruptura
- Reproducción automática con controles de reproducir/pausar e indicador de progreso
- Integración de extensión AutoScroll para carruseles de desplazamiento continuo
- Soporte de navegación con rueda del ratón para accesibilidad
- Modo pantalla completa con capacidades de zoom
- Carga diferida de imágenes mediante integración con el módulo Blazy
- Soporte para integraciones lightbox (Colorbox, PhotoSwipe, Photobox)
- Soporte de gestos táctiles y deslizamiento con comportamiento de arrastre configurable
- Opciones personalizadas de skin para flechas y paginación (puntos)
- Opciones de diseño para posicionamiento de leyendas (14 diseños incluyendo vistas divididas)
- Anulación de opciones de optionset a nivel de formateador/visualización
- API programática con hooks para alterar optionsets, opciones y adjuntos
Use Cases
Galería de Imágenes con Miniaturas
Crea un slider de imagen principal con navegación de miniaturas sincronizada debajo. Configura usando dos optionsets: uno para la visualización principal con imágenes grandes y otro para la navegación de miniaturas. Establece 'Optionset nav' y 'Skin navigation' en la configuración del formatter. Posiciona las miniaturas usando la opción Navigation position.
Carrusel de Imágenes de Productos
Muestra múltiples imágenes de productos en formato carrusel mostrando 3-4 elementos a la vez. Crea un optionset con perPage: 3 o 4, type: loop para desplazamiento infinito, y habilita flechas/paginación. Aplica el formatter Splide Image al campo de imagen del producto.
Slider de Testimonios
Crea un carrusel de testimonios con reproducción automática y transiciones de desvanecimiento. Usa el formatter Splide Text en un campo de texto multi-valor, o Splide Entity Reference en una referencia de tipo de contenido de testimonios. Habilita autoplay, establece type: fade, y aplica el skin X Testimonial de Splide X.
Presentación de Banners Principales
Banners de página de inicio a ancho completo con texto superpuesto. Usa el skin Fullwidth o Fullscreen, habilita autoplay con indicador de progreso, establece perPage: 1, y elige el diseño de subtítulos apropiado (center, bottom, etc.). Funciona con formatters de Image y Media.
Galería en Cuadrícula con Lightbox
Muestra imágenes en una cuadrícula que se abre en un lightbox. Habilita el diseño Grid con elementos visibles, aplica el skin Grid, establece Media switch a Colorbox o PhotoSwipe. La cuadrícula puede ser estática o paginada con navegación de carrusel.
Slider de Noticias basado en Views
Slider dinámico que extrae los últimos artículos de noticias. Crea un View con formato Splide Slider, configura campos para imagen y título, selecciona optionset y skin. Usa el optionset de agrupación para navegación por pestañas basada en categorías.
Slider Incrustado en WYSIWYG
Permite a los editores de contenido incrustar sliders en el texto del cuerpo. Habilita el filtro de texto Splide, luego usa shortcodes como [splide data="node:5:field_gallery" /] para incrustar imágenes de contenido existente, o [splide][slide]...[/slide][/splide] para diapositivas HTML en línea.
Tips
- Siempre clona los optionsets y Views de ejemplo de Splide X en lugar de modificarlos directamente - las actualizaciones pueden revertir los cambios a los valores de fábrica
- Usa la opción Override main optionset en los formatters para reutilizar un optionset para múltiples visualizaciones con ligeras variaciones
- Para mejor rendimiento, desactiva la carga en todo el sitio a menos que se necesite específicamente para sliders en el texto del cuerpo
- Al actualizar, siempre limpia la caché y vuelve a guardar los optionsets para obtener las nuevas opciones
- Splide no requiere Splide UI para funcionar - es seguro desinstalar el módulo UI una vez que hayas terminado de configurar los optionsets
- Combina el diseño Grid con el efecto de miniaturas para galerías de cuadrícula estáticas que se abren en lightbox sin navegación de carrusel
- Usa el atributo data en los shortcodes del filtro de texto para contenido dinámico: [splide data="node:ID:FIELD_NAME" /]
- Para sliders verticales, establece Direction a 'ttb' y recuerda proporcionar una altura CSS para el contenedor .splide--nav
Technical Details
Admin Pages 3
/admin/config/media/splide
Configura los ajustes globales de Splide incluyendo opciones de CSS y comportamiento de carga en todo el sitio. Esta página permite habilitar/deshabilitar archivos CSS del módulo, configurar la inicialización global y previsualizar el comportamiento del slider.
/admin/config/media/splide/optionset
Crear, editar y administrar conjuntos de opciones de Splide. Cada conjunto de opciones define una configuración reutilizable para el comportamiento, apariencia y ajustes responsivos del slider que se puede aplicar a formateadores de campo, visualizaciones de Views o filtros de texto.
/admin/config/media/splide/optionset/add
Crear un nuevo conjunto de opciones de Splide con ajustes personalizables para tipo de slider, transiciones, navegación, reproducción automática, puntos de quiebre y opciones avanzadas.
Permisos 1
Hooks 4
hook_splide_build_alter
Modifica el array de construcción de Splide antes de renderizar el slider.
hook_splide_optionset_alter
Modifica la configuración del optionset antes de aplicarla al slider.
hook_splide_skins_info
Registra skins personalizados de Splide con recursos CSS y JS.
hook_splide_overridable_options_info_alter
Modifica la lista de opciones que pueden ser sobrescritas en los formateadores.
Troubleshooting 8
Los skins y optionsets se almacenan permanentemente en caché. Limpia todas las cachés en /admin/config/development/performance o ejecuta 'drush cr' para hacer visibles los nuevos elementos.
Vuelve a guardar los optionsets en /admin/config/media/splide y vuelve a guardar la configuración de visualización de campos. Limpia la caché y regenera el JS agregado si usas agregación.
La transición fade está diseñada para vista de una sola diapositiva. Cambia perPage a 1 cuando uses el modo fade, o cambia a tipo slide/loop para carruseles.
El modo loop crea diapositivas clonadas que aparecen en los lightboxes. Cambia el tipo de 'loop' a 'slide' o 'fade' cuando uses Colorbox/PhotoSwipe/Photobox.
Asegúrate de que tanto el optionset principal como el de navegación usen 'type: loop' o ninguno use loop. Desactiva la opción randomize en todos los optionsets. Verifica que optionset_nav esté correctamente seleccionado.
autoHeight es incompatible con la dirección vertical (ttb). Usa fixedHeight o heightRatio en su lugar para sliders verticales.
Asegúrate de que: 1) El total de elementos > visible_items, 2) El skin Grid esté seleccionado, 3) perPage y perMove estén establecidos en 1 en el optionset, 4) Exista suficiente contenido.
El CSS de administración de Splide puede entrar en conflicto con algunos temas de administración. Desactiva el CSS de administración en /admin/config/media/blazy si experimentas problemas de visualización.
Security Notes 4
- El módulo sigue las mejores prácticas de seguridad de Drupal y tiene cobertura de avisos de seguridad
- Los permisos de usuario se aplican correctamente - solo los usuarios con 'administer splide' pueden modificar los optionsets
- La entrada del filtro de texto se sanitiza para prevenir ataques XSS en el contenido de shortcodes
- Siempre valida y sanitiza cualquier CSS/JS de skin personalizado antes del despliegue