Slider

FancySlider es un slider/carrusel reutilizable construido sobre Embla Carousel. Un solo componente cubre un carrusel de tarjetas, una vitrina con reproducción automática, sliders sincronizados y más, controlado con props y slots. Cada slide es un FancySlide cuyo slot content acepta cualquier contenido.

Requisitos

Ninguno — es autocontenido. La librería Embla va inlineada en el script del componente, así que el slider funciona tengas o no instalado el plugin experimental Etch Carousel. Si el plugin está presente, se usa su copia de Embla; en cualquier caso no hay nada que instalar.

La barra de progreso del autoplay se mueve con una variable CSS (--fe-slider-progress, 0→1) que el script hace avanzar — sin @keyframes, así que no hay ningún stylesheet "Fancy Slider" que pegar ni nada que preparar antes de usar autoplay.

Anatomía

FancySlider (el contenedor) tiene dos slots:

• slides — un FancySlide por slide.
• controls — los controles que quieras, en el orden y la posición que quieras. No viene nada cableado por defecto: añade solo lo que el diseño necesite.

Los controles son componentes independientes, así que pueden ir donde sea: dentro del slot, encima de los slides, en una esquina, o totalmente fuera del slider:

Componente	Qué hace
FancySliderArrow	Botón anterior o siguiente (prop direction).
FancySliderDots	Paginación. Skin dots / progress / lines / worm; colores y tamaños se ajustan desde sus propiedades (sin tocar CSS).
FancySliderThumbnails	Tira de miniaturas — una vista previa por slide, clic para saltar, la activa se resalta. Toma la imagen de cada slide sola; ver Navegación por miniaturas.
FancySliderPlayPause	Play/pausa del autoplay. También puede arrancarlo en un slider que lo tenga apagado.
FancySliderProgress	La barra de progreso del autoplay.
FancySliderCounter	Contador del slide actual — fraction (2 / 5) o current (solo el número). Skin inline / stacked / pill, más Colors, Size, Separador y relleno con cero, todo desde el panel. Se actualiza en vivo.
FancySliderControls	Fila opcional que coloca un grupo de controles en horizontal.

El script se ata a atributos data-* en vez de clases, así que cualquier diseño puede re-estilizarse libremente sin tocar el comportamiento:

Atributo	Dónde	Propósito
data-fe-slider	Raíz	Marca el slider. Todas las opciones se leen de atributos planos en este mismo elemento.
data-fe-slider-viewport	Recorte de overflow	El viewport de Embla — el elemento que recorta la pista en movimiento.
data-fe-slider-container	La pista móvil	Contiene los slides; es lo que realmente se traslada.
data-fe-slider-slide	Cada slide	Un FancySlide.
data-fe-slider-prev / -next	Botones	Controles anterior / siguiente.
data-fe-slider-dots	Envoltorio	El script lo llena con un botón por página.
data-fe-slider-thumbnails	Envoltorio	El script lo llena con un botón-miniatura por slide.
data-fe-slider-playpause	Botón	Botón play/pausa (solo con autoplay).
data-fe-slider-progress	Barra	La barra de progreso del autoplay.

Props

FancySlider

El panel de propiedades está organizado en cuatro grupos plegables.

Accent color — accentColor (default var(--primary)) tematiza los controles de una vez: los props de color de cada control defaultean a var(--fe-slider-accent, var(--primary)), así que esto fija el color activo de los puntos, el relleno del progreso, el hover de flechas/play, etc. en un solo sitio. Un color por-control lo sigue sobreescribiendo, y un control colocado fuera del slider cae de vuelta a var(--primary).

Label (a11y) — label, el nombre accesible de todo el carrusel, va suelto arriba del todo.

Layout

Prop	Tipo	Default	Notas
slidesMobile	select	"1"	Slides visibles a la vez en móvil (retrato, por debajo de 478px).
slidesLandscape	select	"1"	Slides desde el breakpoint de móvil apaisado (478px). Por defecto 1 para igualar el conteo de móvil hasta que lo diferencies.
slidesTablet	select	"2"	Slides visibles desde el breakpoint de tablet.
slidesDesktop	select	"3"	Slides visibles desde el breakpoint de escritorio.
viewportBreakpoints	boolean	false	A qué ancho reaccionan los conteos de arriba. Off (por defecto): al ancho del propio slider (container query) — el mismo slider muestra menos slides en una columna estrecha que a todo lo ancho. On: al ancho de la ventana (media query). Ver Breakpoints responsive.
slidesToScroll	select	"1"	Cuántos slides avanzan por paso de navegación.
snapPosition	select	"start"	En qué punto del viewport queda el slide activo al terminar el desplazamiento — start, center, end. Es cosa del scroll, no alineación visual.
slideAlign	select	"stretch"	Cómo se alinean los slides cuando su contenido tiene alturas distintas — stretch los iguala todos a la altura del más alto; start, center y end dejan a cada uno con su altura natural, alineado arriba, al centro o abajo.
orientation	select	"horizontal"	Dirección del scroll — horizontal o vertical. Ver Orientación vertical.
height	text	"22rem"	Alto del viewport, solo vertical (en horizontal el alto lo dan los slides).
width	text	"28rem"	Ancho máximo, solo vertical — un track vertical no tiene ancho natural, así que sin tope el slide más ancho (una imagen a tamaño intrínseco) lo definiría.

Behavior

Prop	Tipo	Default	Notas
loop	boolean	true	Desplazamiento infinito — da la vuelta en los extremos.
transition	select	"normal"	Velocidad de la animación — slow, normal, fast.
dragFree	boolean	false	Arrastre con inercia, sin puntos de anclaje.
noDrag	boolean	false	Desactiva el arrastre — se navega solo con los controles. Recomendado en sliders verticales: un slider vertical se queda el gesto táctil arriba/abajo, así que en móvil el visitante que desliza encima mueve los slides en vez de hacer scroll de la página y se queda atrapado. Con esto, el gesto vuelve al navegador.
slideClick	boolean	false	Hace de cada slide un destino de navegación — al hacer clic (o Enter/Espacio con foco) el slider se desplaza a él. Ideal para un slider tipo miniatura sincronizado con uno principal: al clicar una miniatura se mueven ambos. Un link o botón real dentro de un slide sigue funcionando. Ver Clic para seleccionar.
Auto scroll (grupo)	—	—	Desplazamiento continuo tipo marquesina (Embla Auto Scroll, incluido — nada que subir). enabled, speed, direction (forward/backward), pauseHover, disableDrag (apaga el arrastre para una marquesina pura). Va mejor con Loop; ignora Autoplay.
effect	select	"slide"	Cómo un slide sustituye al siguiente — slide, fade, fade-up, zoom, cover, reveal, none. Todo lo que no sea slide está pensado para sliders que muestran un solo slide a la vez, así que la opción solo aparece cuando mobile, tablet y desktop son 1; ver Efectos de transición.
edgeFade	boolean	false	Difumina los slides en los bordes izquierdo y derecho en vez de cortarlos en seco. Útil cuando el slider no ocupa todo el ancho de la pantalla. Viene apagado: la máscara que necesita también limita cuánto puede crecer un slide en vertical — ver Difuminado de bordes.
lazy	boolean	false	Carga las imágenes de los slides justo antes de que entren en vista, en vez de todas al cargar la página — ver Carga diferida de imágenes.

Autoplay — ver Autoplay

Prop	Tipo	Default	Notas
enabled	boolean	false	Avanza automáticamente.
interval	string	"5"	Segundos entre avances. Solo aparece cuando enabled está activo.

Connect

Prop	Tipo	Default	Notas
sliderId	string	""	Un nombre para este slider, para que los controles colocados fuera puedan encontrarlo.
syncId	string	""	Los sliders con el mismo id se mueven juntos — ver Sliders sincronizados.

No hay interruptores de "mostrar flechas / mostrar puntos": un control aparece porque lo añadiste, y desaparece porque lo quitaste.

FancySlide

FancySlide no tiene props — coloca cualquier contenido en su slot content (tarjetas, imágenes, citas, lo que el diseño necesite).

Controles

Prop	Tipo	Default	Notas
sliderId	string	""	Qué slider controla. Déjalo vacío cuando el control está dentro del slider — encuentra el que lo rodea.
direction	select	"next"	Solo FancySliderArrow — prev o next.
label	string	"Next slide"	Solo FancySliderArrow — su nombre accesible.
iconDirection	select	"auto"	Solo FancySliderArrow — hacia dónde apunta el glifo. auto sigue al slider que controla (arriba/abajo si es vertical, también en flechas colocadas fuera); horizontal / vertical lo fuerzan. Elegir vertical a propósito además pone de lado el skin text (writing-mode), porque si lo eliges es que quieres todo el control vertical — auto deja PREV / NEXT en horizontal, que se leen igual de bien.
format	select	"fraction"	Solo FancySliderCounter — fraction muestra 2/5, current solo 2.
separator	string	"/"	Solo FancySliderCounter — qué va entre los dos números.
pad	boolean	false	Solo FancySliderCounter — rellena con cero los dígitos sueltos (01, 02…).

El contador lleva aria-hidden: cada slide ya se anuncia como "2 of 5", así que repetirlo solo añadiría ruido para quien usa lector de pantalla.

Estados

El script mantiene sincronizado un conjunto de atributos a medida que el slider se mueve, para poder estilizar cualquier estado sin JavaScript:

Atributo	Dónde	Significado
data-start / data-end	Raíz	El slider está en su primera / última posición (las flechas quedan disabled ahí cuando loop está desactivado).
data-playing / data-paused	Raíz	El autoplay está corriendo / pausado temporalmente.
data-active	Slide	El slide actual.
data-prev / data-next	Slide	El slide inmediatamente anterior / posterior al actual.
data-visible	Slide	Cualquier slide dentro del viewport. Con un efecto apilado solo cuenta como visible el activo.
data-leaving	Slide	El slide del que viene el slider. Lo usan cover y reveal; también sirve para animaciones de salida.
data-direction	Raíz	forward o backward — hacia dónde se movió el slider por última vez.
data-stacked	Raíz	Presente siempre que el efecto no sea slide.

Por ejemplo, atenúa los slides no activos con .fe-slider__slide:not([data-active]) { opacity: 0.5; }.

Slides por vista

slidesMobile, slidesLandscape, slidesTablet y slidesDesktop fijan cuántos slides se muestran en cada tamaño, mobile-first: el valor de móvil es la base y cada tramo más ancho lo sobrescribe según haya sitio. Cuatro tramos, de menor a mayor:

Tramo	Desde	Prop
Móvil (retrato)	base, por debajo de 478px	slidesMobile
Apaisado	478px	slidesLandscape
Tablet	767px	slidesTablet
Escritorio	991px	slidesDesktop

El apaisado cae de vuelta al conteo de móvil cuando se deja en su default, así que un slider que solo diferencia móvil/tablet/escritorio se comporta igual que antes.

Miden el ancho del propio slider, no el de la ventana. El slider se lleva su contexto de contenedor consigo (el selector "Has Me", :has(> &)), así que el mismo slider configurado a 3 columnas muestra tres slides en una sección a todo lo ancho y baja a uno dentro de una barra lateral estrecha, sin configurar nada extra. Los umbrales salen de los tokens compartidos --fe-landscape (478px), --fe-tablet (767px) y --fe-desktop (991px).

Internamente se vuelven variables CSS en la raíz, y cada slide es flex: 0 0 calc(100% / var(--fe-slider-count)) — CSS puro, sin JavaScript re-midiendo al redimensionar.

Breakpoints responsive

Por defecto los conteos reaccionan al ancho del propio slider (container query). Es lo correcto casi siempre: un slider reutilizable se adapta al hueco en el que esté.

La excepción es un slider que nunca se ensancha aunque la pantalla sea grande — uno dentro de una columna estrecha, como la tira de miniaturas del Synced Hero. Su propio ancho nunca cruza los umbrales de tablet/escritorio, así que en modo container se queda pegado al conteo de móvil (1) por grande que sea la ventana.

Activa viewportBreakpoints para que los conteos pasen a mirar el ancho de la ventana (media query). Mismos valores slidesMobile/Tablet/Desktop, mismos umbrales (767px / 991px) — solo cambia el ancho que se mide:

viewportBreakpoints	Los conteos siguen	Úsalo cuando
false (por defecto)	El ancho del propio slider	El slider ocupa su breakpoint — la mayoría de los casos.
true	El ancho de la ventana	El slider vive en una columna estrecha/fija y quieres que reaccione a la pantalla, no a su hueco.

/* Por defecto — container query: el inline-size del propio slider. */
@container (inline-size >= 991px) {
  .fe-slider:not([viewport-breakpoints="true"]) { --fe-slider-count: var(--fe-slider-count-d, 3); }
}
/* Opcional — media query: el ancho de la ventana. */
@media (min-width: 991px) {
  .fe-slider[viewport-breakpoints="true"] { --fe-slider-count: var(--fe-slider-count-d, 3); }
}

Controles fuera del slider

Los controles no tienen por qué vivir dentro del slider. Para manejarlo desde otro punto de la página — una barra de navegación, una esquina fija, la otra columna de un layout partido — haz dos cosas:

1. Dale al slider un Slider ID, por ejemplo hero.
2. Dale a cada control el mismo Slider ID.

Ese es todo el vínculo. Un control con el Slider ID vacío recurre a "el slider dentro del que estoy", y por eso los controles que sueltas en el slot controls no necesitan configuración alguna.

Sliders sincronizados

Dale el mismo syncId a dos o más sliders y se mueven juntos — avanza uno y los demás siguen al mismo índice, en cualquier dirección. Útil para una tira de miniaturas que controla un slider principal, o carruseles de texto/imagen emparejados. Deja syncId vacío (el default) para un slider independiente.

Clic para seleccionar

Activa slideClick para que cada slide sea un destino de navegación: al hacer clic —o pulsar Enter/Espacio con el foco puesto— el slider se desplaza a ese slide.

Brilla junto a los sliders sincronizados: usa un segundo slider como navegador de miniaturas (sus slides son las miniaturas), dale a ambos el mismo syncId y activa slideClick en el de miniaturas. Al clicar una miniatura se mueven los dos. Es la alternativa ligera al control dedicado de tira de miniaturas cuando tus miniaturas son simplemente los slides de otro slider — como las tarjetas del Synced Hero.

Detalles:

• Accesibilidad — mientras está activo, cada slide en vista pasa a role="button" con tabindex="0" y soporte de teclado (Enter/Espacio). Los slides fuera de vista siguen inert, así que solo los visibles son alcanzables. Al desactivar la opción se restaura el rol original del slide.
• Los links dentro de un slide siguen funcionando — un clic que cae en un <a>, <button> o control de formulario real dentro del slide hace lo suyo; no se secuestra para navegar.
• Autoplay — clicar un slide respeta "Pausa en prev/next": con ella activa (default), seleccionar un slide detiene el autoplay.

<!-- slider principal -->
<div class="fe-slider" data-fe-slider sync-id="hero">…</div>
<!-- navegador de miniaturas: mismo sync-id, slides clicables -->
<div class="fe-slider" data-fe-slider sync-id="hero" slide-click="true">…</div>

Accesibilidad

Sigue el patrón ARIA de Carousel:

• La raíz es un role="region" con aria-roledescription="carousel" y tu label como nombre accesible.
• Cada slide es un role="group" con aria-roledescription="slide" y un aria-label tipo "2 of 6", sincronizado automáticamente.
• La pista es una región aria-live — polite normalmente, cambiada a off mientras el autoplay corre (los cambios del autoplay no se anuncian), de vuelta a polite al detenerse.
• Si activas el autoplay, añade un control FancySliderPlayPause. APG exige que el contenido auto-rotativo ofrezca una forma visible de detener el movimiento, y como los controles son opcionales eso queda de tu parte. (El autoplay se pausa igualmente con hover y con el foco de teclado.)
• Las flechas quedan disabled en los extremos cuando loop está desactivado; los puntos exponen aria-current en la página activa y muestran un anillo de foco de teclado.
• Los slides fuera de vista se marcan inert, así los usuarios de teclado o lector de pantalla no pueden caer en enlaces o botones de un slide oculto.

Movimiento reducido

Para visitantes que han pedido movimiento reducido (prefers-reduced-motion):

• El autoplay nunca arranca, y el auto-scroll continuo ni siquiera se activa.
• El efecto por defecto slide cambia a un corte instantáneo en vez de animar el track (los efectos apilados ya se reducían por CSS).
• Cambiar la preferencia se respeta en vivo — sin recargar.

Autoplay y barra de progreso

Con autoplay activo, el slider avanza automáticamente y muestra una barra de progreso horizontal contando hacia el siguiente avance. La barra es una variable CSS: --fe-slider-progress va de 0 a 1 y el relleno es transform: scaleX(var(--fe-slider-progress)). El script la hace avanzar cada frame, así que no hay @keyframes (nada que pegar en un stylesheet) y pausar simplemente detiene el bucle, congelando la barra justo donde está.

• Solo corre mientras es visible. Un IntersectionObserver inicia/pausa el ciclo a medida que el slider entra/sale del viewport.
• Se pausa de verdad con hover o foco de teclado. La barra se congela exactamente donde está y continúa desde ese mismo punto, en vez de reiniciarse.
• El botón play/pausa lo detiene y reanuda a demanda, y cualquier arrastre, flecha o clic en un punto lo detiene para esa vista de página.
• Respeta prefers-reduced-motion — el autoplay nunca arranca para visitantes que han pedido movimiento reducido.

Efectos de transición

Por defecto los slides se desplazan lateralmente. Con Slide effect (grupo Behavior) pueden cambiar en el sitio — pensado para sliders que muestran un solo slide a la vez, como un hero.

Efecto	Qué hace
slide	El track se desplaza en horizontal. Es el default.
fade	Los slides se funden uno con otro sin moverse.
fade-up	Se funden mientras el que entra sube hasta su sitio desde abajo (igual en ambos sentidos).
zoom	Se funden mientras el que entra se reduce desde --fe-slider-zoom-from hasta su tamaño normal. Ponlo por debajo de 1 (0.92) y entra creciendo.
cover	El slide nuevo entra por encima del que dejas, que se queda quieto. Hacia atrás, el viejo se aparta para descubrir al nuevo.
reveal	La misma idea, pero el slide se descubre como una cortina (clip-path) en vez de desplazarse.
none	El cambio es instantáneo, sin efecto propio — el punto de partida para tu propia animación.

La navegación, el autoplay, los puntos, el contador, el swipe y la sincronización entre sliders funcionan igual con cualquier efecto; solo cambia la transición visual.

Crear tu propia animación

Elige none y anima contra [data-active]. Una animación CSS se reinicia cada vez que el slide pasa a ser el activo, así que un hero puede hacer zoom en la imagen mientras el texto entra un poco después:

.mi-hero-slide {
  /* La imagen hace zoom lento mientras su slide está en pantalla */
  & img {
    transition: scale 6s linear;
    scale: 1;
  }
  &[data-active] img {
    scale: 1.12;
  }

  /* El texto entra después de la imagen */
  &[data-active] .mi-hero-texto {
    animation: mi-hero-in 0.8s 0.2s ease both;
  }
}

/* En la propia .mi-hero-texto con el plugin Fancy Etch,
   o en Style Manager → Stylesheets sin él */
@keyframes mi-hero-in {
  from { opacity: 0; translate: 0 1.5rem; }
  to   { opacity: 1; translate: 0 0; }
}

Dónde puede ir el @keyframes lo explica Inicio rápido.

Cada slide lleva además --fe-slider-index (0, 1, 2 …), útil para escalonar, y la raíz lleva data-direction por si quieres que la animación cambie según hacia dónde se movió el slider.

Difuminado de bordes

Cuando el slider no ocupa todo el ancho de la pantalla, los slides que entran y salen se cortan en seco contra el borde del viewport. La opción Fade edges (grupo Behavior) hace que se desvanezcan en vez de cortarse.

Viene apagada a propósito. El difuminado es un mask-image, y una máscara también recorta en vertical: todo lo que un slide haga fuera del viewport — una elevación al pasar el ratón, una escala, una sombra — deja de pintarse en cuanto pasa de --fe-slider-fade-headroom. Actívala donde quieras el efecto y sube la holgura a lo que hagan tus slides:

.mi-slider {
  --fe-slider-fade: 2.5rem;        /* cuánto difumina */
  --fe-slider-fade-headroom: 3rem; /* sitio para que la tarjeta se eleve */
}

Orientación vertical

Pon Orientation en vertical (Layout) y el slider se desplaza arriba y abajo en vez de izquierda-derecha — drag, flechas, puntos, autoplay, loop y carga diferida siguen funcionando en el eje Y.

Un track vertical no tiene ni alto ni ancho natural, así que ambos salen de props que solo aparecen en modo vertical: Viewport height (height, p. ej. 22rem o 80vh) y Max width (width, por defecto 28rem). El tope de ancho importa: sin él, el slide más ancho (una imagen a tamaño intrínseco) fijaría el ancho del slider y reventaría el layout. Los slides por vista siguen aplicando: con 1 tienes un slide que llena el alto, con más se apilan.

<div class="fe-slider" data-fe-slider orientation="vertical"
     style="--fe-slider-height: 24rem">…</div>

:::tip Vertical en móvil Activa Disable drag (Behavior) en sliders verticales. Si no, el slider se queda el gesto vertical y los visitantes no pueden hacer scroll de la página al pasar por encima: se quedan atrapados. La navegación sigue funcionando con flechas, puntos y miniaturas. :::

:::note Notas Vertical aplica solo al efecto por defecto slide. Los efectos apilados (fade, zoom, cover, reveal, fade-up) son superposiciones de un slide a la vez, así que elegir uno mantiene el slider horizontal aunque Orientation esté en vertical. Los glifos de las flechas apuntan arriba/abajo solos: FancySliderArrow tiene un prop Icon direction en auto, que sigue al slider. :::

RTL

El slider sigue la dirección de escritura de la página — pon dir="rtl" en la página (o direction: rtl en un ancestro) y se refleja solo: el track se desplaza al revés, y el gap y el orden de los slides se voltean con él. Nada que configurar.

Los efectos apilados (fade, zoom, cover, reveal, fade-up) colocan los slides con un transform físico, así que el script marca la raíz con data-rtl y el CSS refleja esos desplazamientos — cover y reveal además barren desde el otro lado.

Navegación por miniaturas

Coloca un FancySliderThumbnails junto a un slider y arma una tira de vistas previas — una por slide — que resaltan el slide actual y saltan a él al hacer clic. Es el control de puntos, pero con imágenes. Sin un segundo slider sincronizado, sin duplicar contenido.

La imagen de la miniatura se busca sola, en este orden:

1. data-thumb="…" en el slide (o en su imagen) — úsalo para una vista previa más ligera que la imagen completa del slide;
2. si no, la primera <img> del slide (su data-src con lazy activo, si no su src);
3. si el slide no tiene imagen, la miniatura muestra el número del slide.

Skins: frame (marco de color en la activa, las demás atenuadas), dim (solo opacidad), bar (subrayado bajo la activa). Tamaño, proporción, gap, radio, color de acento y opacidad inactiva salen del panel.

:::note Miniaturas y lazy load Una tira de miniaturas muestra todos los slides, así que carga todas las miniaturas. Si además quieres las imágenes principales diferidas, apunta data-thumb a archivos de vista previa pequeños para que la tira quede ligera mientras las imágenes completas siguen cargándose bajo demanda. :::

Carga diferida de imágenes

Para sliders con muchas imágenes, Lazy load images (Behavior) carga cada imagen solo cuando su slide está en vista o a punto de estarlo, en vez de descargarlas todas al cargar la página.

Dale a las imágenes que quieras diferir un data-src (y opcionalmente data-srcset) en lugar de src, y activa la opción:

<div class="fe-slider__slide">
  <img data-src="/uploads/foto-3.jpg"
       data-srcset="/uploads/foto-3.jpg 1x, /uploads/foto-3@2x.jpg 2x"
       alt="…" />
</div>

El script carga los slides en vista más sus vecinos inmediatos (para que el siguiente ya esté listo) y hace aparecer cada imagen con un fundido al llegar — ajusta --fe-slider-lazy-fade para cambiarlo o desactivarlo. Las imágenes sin data-src se dejan intactas.

:::note ¿Por qué no loading="lazy"? La carga diferida nativa no es fiable en un carrusel: los slides se mueven con transform de CSS, no con scroll, así que el navegador no sabe qué imágenes están fuera de vista. Esta opción usa el seguimiento de slides en vista de Embla para decidir qué cargar. :::

Variables CSS

Cada pieza tiene sus propias variables. Seleccionas una flecha y sus ajustes están en la clase que estás mirando — nunca hay que ir a buscarlos a otra clase. Es también lo que permite que un control funcione colocado fuera del slider: no depende de heredar nada.

.fe-slider — el slider en sí:

Variable	Default	Controla
--fe-slider-gap	var(--space-s)	Espacio entre slides.
--fe-slider-ui-gap	var(--space-s)	Espacio entre los slides y lo que haya en el slot controls.
--fe-slider-effect-duration / -ease	0.6s / ease	Tiempo de los efectos fade y zoom.
--fe-slider-zoom-from	1.08	Escala desde la que entra el slide con el efecto zoom. Por debajo de 1 entra creciendo.
--fe-slider-shift	1.5rem	Cuánto se desplaza el slide con el efecto fade-up.
--fe-slider-fade	2rem	Ancho del difuminado de los bordes. Solo aplica con Fade edges activo.
--fe-slider-fade-headroom	4rem	Cuánto puede sobresalir un slide por arriba o por abajo del viewport antes de que el difuminado lo recorte. Solo aplica con Fade edges activo.

.fe-slider__arrow — botones anterior / siguiente. El prop Skin es el DISEÑO del botón — solid (default), outline, minimal (solo glifo), line (glifo de flecha recta), text (una palabra en vez de icono — por defecto PREV/NEXT según la dirección, con un campo Text opcional para cambiarlo; ignora el radius). Los Colors (fondo, icono/texto y sus hover) y el Size (botón, glifo, radio) son grupos de propiedades, así que la flecha se estiliza entera desde el panel — sin sobrescribir variables del padre ni de un wrapper:

Variable	Default	Controla
--fe-slider-arrow-size	2.75rem	Tamaño del botón.
--fe-slider-arrow-radius	50%	Radio de esquina.
--fe-slider-arrow-color / -bg	var(--primary) / var(--base-ultra-light)	Color / fondo, en reposo.
--fe-slider-arrow-color-hover / -bg-hover	var(--white) / var(--primary)	Color / fondo, hover.
--fe-slider-arrow-glyph	SVG chevron	Forma de la flecha, como mask-image — cámbiala sin tocar el markup. La flecha "anterior" la reutiliza, volteada.
--fe-slider-arrow-glyph-size	1.1rem	Tamaño del glyph dentro del botón.
--fe-slider-arrow-duration / -ease	0.3s / ease	Timing de la transición de hover.

.fe-slider__dots — paginador:

Variable	Default	Controla
--fe-slider-dots-gap	0.5rem	Espacio entre puntos.
--fe-slider-dot-size	0.625rem	Tamaño del punto.
--fe-slider-dot-color / -color-active	var(--base-light) / var(--primary)	Color del punto, inactivo / activo.
--fe-slider-dot-scale-active	1.25	Cuánto crece el punto activo.
--fe-slider-dot-duration / -ease	0.3s / ease	Timing de la transición.

.fe-slider__playpause — los mismos ajustes que la flecha, con el nombre --fe-slider-play-* (-size, -radius, -color, -bg, -color-hover, -bg-hover, -glyph-size, -duration, -ease), más --fe-slider-play-glyph y --fe-slider-pause-glyph para los dos iconos.

.fe-slider__progress — la barra del autoplay:

Variable	Default	Controla
--fe-slider-progress-height	4px	Grosor de la barra.
--fe-slider-progress-radius	999px	Radio de esquina.
--fe-slider-progress-color / -bg	var(--primary) / var(--base-light)	Relleno / riel.
--fe-slider-progress-duration	5s	Se fija automáticamente desde autoplayInterval — no sobreescribir a mano.

.fe-slider__controls — la fila opcional: --fe-slider-controls-gap (var(--space-s)), el espacio entre los controles que agrupa.

Extender

El elemento raíz expone una pequeña API para plantillas personalizadas: el.feSlider.next(), .prev(), .goTo(i), .stopAutoplay(), y la instancia cruda .embla. También emite un evento fe-slider:select (con el nuevo índice en detail) en cada cambio — conecta UI externa a eso.