Plugin Shortcode Swiffy Slider

Control deslizante y carrusel súper rápidos y livianos

Para qué es este plugin

El plugin Shortcode Swiffy-Slider facilita la creación de sliders basados en Swiffy Slider a partir del contenido de tus páginas. Swiffy Slider ofrece una amplia gama de características y funcionalidades a las que se puede acceder directamente desde el panel de administración de Grav. Entre las características se incluyen:

Navegación con toque, teclado, trackpad, lápiz y ratón, ya que utiliza el desplazamiento del navegador.
Utiliza el comportamiento de desplazamiento nativo del navegador, scroll-snap y CSS grid para ofrecer la mejor experiencia en dispositivos móviles y táctiles.
Puede funcionar en modo solo CSS, sin JavaScript, para un rendimiento aún mejor.
Amigable con el SEO: todo el contenido está en marcado puro.
Compatible con WCAG: todo el contenido está en marcado puro y puede ser anotado en consecuencia, soporta tabulación, navegación por teclado, atributos ARIA y todo lo necesario.
La configuración se realiza en marcado puro y clases CSS, no se requiere scripting.
No se carga JavaScript para los slides, configuración o inicialización.
JavaScript Vanilla, menos de 1.3kb (~110 líneas).
Huella general muy baja: ~3.5kb en total (CSS + JS comprimidos con gzip).

Instalación

Normalmente, un plugin debe instalarse a través de GPM (Grav Package Manager):

$ bin/gpm install shortcode-swiffy-slider

Alternativamente, se puede instalar a través del Admin Plugin.

Ejemplo Básico

Este es un ejemplo básico que muestra cómo puedes convertir fácilmente 3 imágenes en un slider:

[swiffy-slider autoplay=true autoplayTimeout=3000 autoplayPauseOnHover=true classes="slider-item-reveal slider-nav-round slider-item-ratio slider-item-ratio-21x9"]
![pic01](pic01.jpg "Imagen 1<br />Esta es la primera imagen<br />Información adicional")
![pic02](pic02.jpg "pic02")
![pic03](pic03.jpg "pic03")
![pic04](pic04.jpg "pic04")
![pic05](pic05.jpg "pic05")
![pic06](pic06.jpg "pic06")
[/swiffy-slider]

En este ejemplo, estamos envolviendo 3 imágenes en sintaxis Markdown con la etiqueta de shortcode [swiffy-slider][/swiffy-slider]

Opciones de Swiffy Slider

Las opciones se pueden pasar a Swiffy Slider como atributos del shortcode. Todos los atributos en el shortcode están entre comillas, como se puede ver en el ejemplo anterior.

Las opciones disponibles están completamente documentadas en el sitio de Swiffy Slider: https://swiffyslider.com/docs/, pero a continuación se presenta un resumen de las actuales:

Clases CSS y opciones

Opciones del Slider

Para el contenedor swiffy-slider. Las clases de opciones item-* afectan a los slides (los hijos de slider-container).

Clase CSS	Descripción
`item-show2` `item-show3` `item-show4` `item-show5` `item-show6`	Muestra 2, 3, 4, 5 o 6 slides a la vez en el contenedor del slider. Cada slide ocupa 1/2, 1/3, 1/4, 1/5 o 1/6 del ancho del contenedor.
`item-show2-sm`	Muestra 2 slides a la vez en el contenedor del slider en viewports pequeños. Por defecto, show2-5 muestra solo un slide en viewports menores a 62rem (992px en la mayoría de los casos). Con esta opción, muestra 2 en viewports pequeños.
`item-reveal`	Revela parte del slide anterior y siguiente. Cada slide ocupa 1/1, 1/2, 1/3, 1/4 o 1/6 del ancho del contenedor menos un poco para revelar los slides adyacentes.
`item-ratio`	Habilita el ajuste de proporción de los elementos del slide. La proporción por defecto es 2:1 o 50%, lo que significa que los slides tienen la mitad de la altura de su ancho. Esta opción establece `object-fit:cover;` en el primer elemento dentro del slide para estirar las imágenes y mantener la proporción.
`item-ratio-32x9` `item-ratio-21x9` `item-ratio-2x1` `item-ratio-16x9` `item-ratio-4x3` `item-ratio-1x1` `item-ratio-3x4`	Controla la proporción del slide cuando está habilitada. La proporción por defecto es 2:1 o 50%, lo que significa que los slides tienen la mitad de la altura de su ancho.
`item-ratio-contain`	Establece que el contenido de un slide con proporción tenga `object-fit:contain;` en lugar de `object-fit:cover;`. Esto asegura que si el contenido del slide es una imagen o un video incrustado, se escale para que todo sea visible dentro del slide.
`item-nogap`	Elimina el espacio horizontal entre los slides.
`item-snapstart`	Ajusta los slides al inicio del contenedor en lugar de al centro cuando se usa `item-reveal`.
`item-nosnap`	Elimina el ajuste automático de los slides, permitiéndoles deslizarse libremente. Esto afecta principalmente a dispositivos táctiles, ya que la navegación con flechas e indicadores es por slide o por página.
`item-nosnap-touch`	Mismo efecto que `item-nosnap` pero solo en dispositivos con entrada primaria que no sea un ratón, es decir, móviles `media (hover: none)`.
`item-first-visible`	Úsalo con `nav-autohide` para ocultar la flecha de navegación anterior cuando el slider se carga. Se eliminará o añadirá automáticamente cuando el primer slide no esté o esté visible.
`item-last-visible`	Úsalo con `nav-autohide` para ocultar la flecha de navegación siguiente cuando el slider se carga. Se eliminará o añadirá automáticamente cuando el último slide no esté o esté visible.
`item-helper`	Para depuración: Añade un diseño de prueba a los slides; altura mínima, color de fondo, centrado de contenido y fondo. Está pensado para pruebas y debe eliminarse en código real.

Opciones de Navegación

Para el contenedor swiffy-slider. Las clases de opciones nav-* afectan a los elementos nav.

Clase CSS	Descripción
`nav-page`	Desplaza toda la página cuando se muestran más de un slide en el contenedor. El comportamiento por defecto mueve solo un slide a la izquierda o derecha.
`nav-noloop`	Desactiva el bucle del slider, de modo que al llegar al primer/último slide, navegar anterior/siguiente no lleva al usuario al último/primer slide.
`nav-nodelay`	Desactiva el desplazamiento suave al usar botones de navegación, indicadores y autoplay. Hace que el nuevo slide o página aparezca instantáneamente sin suavizado de desplazamiento. No afecta a la navegación táctil.
`autoplay`	Desplaza automáticamente al siguiente slide o página en intervalos. El valor por defecto es 2500 ms = 2.5s. Puede ser `true` o `false`.
`autoplayTimeout`	Cambia el intervalo de autoplay por defecto - el valor está en ms. `data-nav-autoplay-interval="3000"`. El valor por defecto es 2500, el valor mínimo es 750 ms.
`autoplayPauseOnHover`	Detiene y reanuda el autoplay cuando el ratón está sobre el contenedor del slider o cuando se toca en dispositivos táctiles. Se reanuda al quitar el ratón, pero no al terminar el toque. Puede ser `true` o `false`.
`nav-round` `nav-square` `nav-arrow` `nav-chevron` `nav-caret` `nav-caretfill`	Cambia las flechas de navegación por defecto a un estilo alternativo usando diferentes flechas.
`nav-touch`	Muestra los botones de navegación en dispositivos táctiles. Por defecto, los botones de navegación están ocultos en dispositivos táctiles usando la consulta `media (hover: none)`. Añadir esta opción hace que los botones de navegación estén siempre visibles en dispositivos táctiles.
`nav-visible`	Hace que los botones de navegación estén siempre visibles. Por defecto, los botones de navegación están ocultos hasta que se pasa el ratón sobre el contenedor.
`nav-outside`	Mueve los botones de navegación fuera del contenedor y reduce el ancho del contenedor en consecuencia (3 o 5 rem en cada lado dependiendo del estilo de navegación).
`nav-outside-expand`	Mueve los botones de navegación fuera del contenedor aplicando márgenes negativos (-3 o -5 rem) para que los slides y el contenedor mantengan su tamaño. Los botones de navegación se superponen al contenido circundante.
`nav-scrollbar`	Hace visible la barra de desplazamiento del `container`. Actúa como indicador y navegación si se ejecuta en modo solo CSS. En dispositivos táctiles, la barra de desplazamiento no se muestra cuando no se está deslizando, ya que así se comporta el navegador.
`nav-dark`	Cambia los botones de navegación a una versión oscura. Flechas negras o un círculo negro con flechas blancas.
`nav-autohide`	Oculta la flecha de navegación correspondiente cuando el primer o último slide está visible para indicar que el desplazamiento está en su inicio o final. Al cargar, la flecha desaparecerá primero cuando se cargue el script. Añade `item-first-visible` al contenedor `swiffy-slider` junto con `nav-autohide` para ocultar la flecha de inicio al cargar antes de que se ejecute el JS.

Opciones de Indicadores

Para el contenedor swiffy-slider. Las clases de opciones indicators-* afectan a los elementos hijos indicators.

Clase CSS	Descripción
`indicators-round`	Cambia los indicadores por defecto a un círculo.
`indicators-square`	Cambia los indicadores por defecto a un cuadrado.
`indicators-outside`	Mueve los botones de indicadores debajo del contenedor y aumenta la altura del contenedor pero no de los slides.
`indicators-dark`	Cambia los botones de indicadores a una versión oscura.
`indicators-highlight`	Resalta aún más el indicador activo aumentando su tamaño.
`indicators-sm`	Muestra los botones de indicadores en dispositivos pequeños con menos de 992px de ancho. Por defecto, los botones de indicadores están ocultos en dispositivos pequeños. Añadir esta opción hace que los botones de indicadores estén siempre visibles. Dado que el número de indicadores y el número de slides no coinciden en dispositivos pequeños cuando se muestran más de un slide por página, no uses esta opción en ese caso.

Opciones de Animación

Para el contenedor swiffy-slider. Las clases de opciones nav-animation-* afectan a la animación de los slides cuando entran en la vista.

Clase CSS	Descripción
`nav-animation`	Habilita la animación en los slides. También se requiere una clase de efecto de animación para que la animación esté habilitada.
`nav-animation-appear`	Animación de aparición usando opacidad y escala, comenzando desde un 30% de opacidad y un 90% de escala.
`nav-animation-fadein`	Animación de fundido usando opacidad, comenzando desde un 50% de opacidad. Puede combinarse con `nav-animation-scale/scaleup`.
`nav-animation-scale`	Animación de escalado usando escala, comenzando con un 90% de tamaño. Puede combinarse con `nav-animation-fadein`.
`nav-animation-scaleup`	Animación de escalado usando escala, comenzando con un 25% de tamaño. Puede combinarse con `nav-animation-fadein`.
`nav-animation-turn`	Animación de giro usando rotateY, comenzando con una rotación de 70 grados.
`nav-animation-slideup`	Animación de deslizamiento hacia arriba usando translateY, comenzando en un 60% de la altura.
`animationTreshold`	Cambia el umbral de animación por defecto - el valor está entre 0-1. `data-slider-nav-animation-threshold="0.3"`. El valor por defecto es 0.3. Este ajuste define cuánto de un slide debe estar visible antes de que comience la animación.

Demos

DEMO 1. Opciones:

autoplayTimeout=3000
autoplayPauseOnHover=true
classes="slider-nav-round slider-item-ratio slider-item-ratio-21x9"

DEMO 2. Opciones:

autoplay=false
classes="slider-indicators-round slider-item-ratio slider-item-ratio-21x9"

DEMO 3. Opciones:

autoplay=false
classes="nav-animation nav-animation-scale slider-nav-square slider-item-nosnap slider-nav-scrollbar slider-indicators-round slider-item-ratio slider-item-ratio-21x9"