Slider — wd-slider

Category: Promo · Tag: wd-sliderBack to: Components overview

---

What it does

A slideshow that shows one item at a time from the content you place inside it. It supports two transition styles (slide or fade), optional navigation arrows, and is right-to-left aware (arrows and sliding flip automatically for RTL languages). The component can also autoplay and loop.

---

Adding it & its settings

Add Component → Promo → Slider, which opens the Manage Component dialog.

Basic Settings (all components): #id, Classes, Inline Style. Set an #id if you'll style with ::part().

Component Settings (Slider):

Setting	Values	Effect
Transition Type	Fade / Slide	Slide scrolls items horizontally; Fade cross-fades them in place.
Show arrows	on / off	Shows the previous/next navigation buttons.

Additional options the component supports but that aren't exposed in the settings form yet: autoplay (autoSlide), autoplay interval (autoSlideInterval, default 5000 ms), dots (showDots), and loop (loop). They're part of the component and may be surfaced in the form later.

---

Content & slots

• Default slot — the slides: each direct child element you place inside the slider is one slide (e.g. an <img>, a card, any block). In slide mode each slide fills the viewport width; in fade mode they stack and cross-fade.
• Named slot previous — custom content for the "previous" arrow button (defaults to a ‹ chevron).
• Named slot next — custom content for the "next" arrow button (defaults to ›).

Slotting your own chevrons? Do not flip them for RTL. ‹ (U+2039) and › (U+203A) are Bidi_Mirrored characters — the browser already reverses them inside a right-to-left run. Slot the same glyph for both directions; swapping them yourself flips twice and points the arrows the wrong way. If you need an arrow that does not auto-mirror, use an SVG.

<wd-slider>
  <img src="slide-1.jpg" alt="" />
  <img src="slide-2.jpg" alt="" />
  <span slot="previous">‹</span>
  <span slot="next">›</span>
</wd-slider>

---

Styling

CSS variables

Set these on the slider (via its #id or class) from a page/layout CSS block. Defaults in parentheses.

Container

Variable	Default
--slider-background-color	transparent
--slider-height	80vh
--slider-border	none
--slider-margin-top	0
--slider-margin-inline-end	0
--slider-margin-bottom	0
--slider-margin-inline-start	0

Navigation buttons (arrows)

Variable	Default
--slider-navigation-buttons-z-index	1
--slider-navigation-buttons-width	2.25rem
--slider-navigation-buttons-height	2.25rem
--slider-navigation-buttons-background-color	#e2e2e2
--slider-navigation-buttons-border	none
--slider-navigation-buttons-border-radius	0.25rem
--slider-navigation-buttons-justify-content	center
--slider-navigation-buttons-align-items	center

Arrow placement — LTR

Variable	Default
--slider-previous-navigation-button-position-area-ltr	center left
--slider-previous-navigation-button-translate-ltr	140%
--slider-next-navigation-button-position-area-ltr	center right
--slider-next-navigation-button-translate-ltr	-140%

Arrow placement — RTL

Variable	Default
--slider-previous-navigation-button-position-area-rtl	center right
--slider-previous-navigation-button-translate-rtl	-140%
--slider-next-navigation-button-position-area-rtl	center left
--slider-next-navigation-button-translate-rtl	140%

Slide mode (each slide)

Variable	Default
--slider-slotted-flex-grow	0
--slider-slotted-flex-shrink	0
--slider-slotted-flex-basis	100%
--slider-slotted-scroll-snap-align	center

Fade mode

Variable	Default
--slider-fade-transition-duration	1s

::part()

The slider exposes one part built from its #id:

Part	Element
slider-<id>	The slider container (.slider).

/* Slider with #id = "hero" */
wd-slider::part(slider-hero) { border-radius: 12px; overflow: hidden; }

---

Notes

• RTL: the slider reads the document direction; arrow placement and slide direction flip automatically. The LTR/RTL variable groups above let you fine-tune arrow placement per direction. The default chevron glyphs are mirrored by the browser's bidi handling, not by the component — see the note under Content & slots.
• Height: the slider is 80vh by default — it does not size itself to its content. Fade mode needs that, because it absolutely-positions its slides. In slide mode you usually want the content to set the height instead: set --slider-height: auto.