Cards Carousel — wd-cards-carousel

Category: Promo · Tag: wd-cards-carouselBack to: Components overview

---

What it does

A horizontally scrolling row of cards — you place a set of cards inside it and visitors swipe/scroll (or use the arrows) through them. It snaps each card into view, is right-to-left aware, and is responsive (cards take more width per row on larger screens).

---

Adding it & its settings

Add Component → Promo → Cards Carousel.

Basic Settings (all components): #id, Classes, Inline Style.

Component Settings:

Setting	Values	Effect
Show arrows	on / off	Shows the previous/next navigation buttons.

The component also supports navigation dots (showDots), which aren't exposed in the settings form yet.

---

Content & slots

• Default slot — the cards: each direct child element is one card.
• Named slot previous / next — custom content for the arrow buttons.

<wd-cards-carousel>
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
  <span slot="previous">‹</span>
  <span slot="next">›</span>
</wd-cards-carousel>

---

Styling

CSS variables

Container

Variable	Default
--cards-carousel-gap	1rem
--cards-carousel-margin-top / -bottom	0
--cards-carousel-margin-inline-start / -end	0
--cards-carousel-padding-top / -bottom	0
--cards-carousel-padding-inline-start / -end	2rem

Cards (each slotted card)

Variable	Default
--cards-carousel-slotted-flex-grow	0
--cards-carousel-slotted-flex-shrink	0
--cards-carousel-slotted-flex-basis	90% (mobile)
--cards-carousel-slotted-flex-basis-md	40% / 45% (from the md breakpoint)
--cards-carousel-slotted-scroll-snap-align	center

Navigation buttons (arrows)

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

Arrow placement — LTR / RTL

Variable	Default
--cards-carousel-previous-navigation-button-position-area-ltr	center left
--cards-carousel-previous-navigation-button-translate-ltr	50%
--cards-carousel-next-navigation-button-position-area-ltr	center right
--cards-carousel-next-navigation-button-translate-ltr	-50%
--cards-carousel-previous-navigation-button-position-area-rtl	center right
--cards-carousel-previous-navigation-button-translate-rtl	-50%
--cards-carousel-next-navigation-button-position-area-rtl	center left
--cards-carousel-next-navigation-button-translate-rtl	50%

::part()

Part	Element
cards-carousel-<id>	The carousel container.

wd-cards-carousel::part(cards-carousel-featured) { padding-block: 1rem; }

---

Notes

• Responsive: cards are ~90% width on small screens and narrower (multiple per row) from the md breakpoint via --cards-carousel-slotted-flex-basis-md.
• RTL: arrow placement flips automatically; use the RTL variables to fine-tune.