Components

Carousel

Put .wckd-carousel on the same node as .columns; each slide is a direct .column child. wckd-ui.js adds prev/next controls and a dot row for non-ticker carousels unless you add hide-arrows (dots only), hide-dots (arrows only), or hide-nav (neither). Add .vertical for column-axis snapping, .peek-right / .peek-left to show a sliver of the next or previous slide, and .ticker plus data-ticker-px-sec for continuous motion (tickers never get arrows or dots). Pair with count-* and gap* utilities on that row; optional data-threshold on the root is read when slides contain .animate for in-view effects.

Jump to:

Download & setup

Download WCKD UI Style guide

Start with the package download and setup steps in Get Started, then use the style guide for utility and token references while implementing this component.

Default implementation

Standard carousel

Default horizontal strip: wckd-ui.js adds arrows and dots. Use hide-arrows, hide-dots, or hide-nav when you need to turn part or all of that off. The live demo sets data-threshold="0.25" so any .animate inside a slide uses that value; it does not change which control is shown.

Slide 1

Slide 2

Slide 3

Slide 4

Markup

<div class="wckd-carousel columns count-1 gap filled-fade rounded padded height-20">
  <div class="column">Slide 1</div>
  <div class="column">Slide 2</div>
  <div class="column">Slide 3</div>
  <div class="column">Slide 4</div>
</div>

Configuration options

Every example uses the same markup shape: .wckd-carousel on a .columns row, with each slide a direct .column child. wckd-ui.js adds the arrow buttons and dot row unless you turn them off (see below). The first examples under Configuration options show hide-arrows, hide-dots, and hide-nav.

Prev/next arrows and dots are on by default for normal carousels. Add hide-arrows to hide only the side buttons, hide-dots to hide only the dot row, or hide-nav to hide both so people scroll or swipe the strip only. Peek layouts often use hide-nav alone.
Ticker (.ticker) never gets arrows or dots; you do not need hide classes on tickers.
data-threshold on the carousel root matters only when a slide contains elements with the animate class: it sets how much of the slide must be on screen before the animation runs (default 0.4 if you omit it). It does not change which dot is active.

hide-arrows (dots only)

Add hide-arrows on the .wckd-carousel row so wckd-ui.js skips .wckd-carousel-nav; the dot row still renders so people can jump to a slide.

Slide A

Slide B

Slide C

Markup

<div class="wckd-carousel columns count-1 gap filled-fade rounded padded hide-arrows">
  <div class="column">Slide A</div>
  <div class="column">Slide B</div>
  <div class="column">Slide C</div>
</div>

hide-dots (arrows only)

Add hide-dots so wckd-ui.js skips .wckd-carousel-dots; prev/next buttons still render when the layout has room for them.

Slide A

Slide B

Slide C

Markup

<div class="wckd-carousel columns count-1 gap filled-fade rounded padded hide-dots">
  <div class="column">Slide A</div>
  <div class="column">Slide B</div>
  <div class="column">Slide C</div>
</div>

hide-nav (no arrows or dots)

Add hide-nav so neither .wckd-carousel-nav nor .wckd-carousel-dots is added; movement is swipe, scroll, or keyboard focus on the slide strip.

Slide A

Slide B

Slide C

Markup

<div class="wckd-carousel columns count-1 gap filled-fade rounded padded hide-nav">
  <div class="column">Slide A</div>
  <div class="column">Slide B</div>
  <div class="column">Slide C</div>
</div>

Peek variation

Combine peek-right and peek-left on the carousel row so a slice of the adjacent slide stays visible; pair with hide-nav here so peek signals more content without arrows or dots.

Starter

Growth

Scale

Markup

<div class="wckd-carousel peek-right peek-left columns count-1 gap filled-fade rounded padded hide-nav height-20">
  <div class="column">Starter</div>
  <div class="column">Growth</div>
  <div class="column">Scale</div>
</div>

Horizontal

Use count-* on the same row as .wckd-carousel to set how many .column cells fit across; arrows and dots stay on unless you add hide-arrows, hide-dots, or hide-nav.

Feature 1

Feature 2

Feature 3

Feature 4

Markup

<div class="wckd-carousel columns count-3 gap filled-fade rounded padded height-20">
  <div class="column">Feature 1</div>
  <div class="column">Feature 2</div>
  <div class="column">Feature 3</div>
  <div class="column">Feature 4</div>
</div>

Vertical

Add .vertical for column-axis snap and pair with a height utility (for example height-25) so scrolling is obvious. This demo adds hide-arrows only because side buttons are tuned for horizontal strips; keep dots unless you also add hide-dots or hide-nav.

Milestone A

Milestone B

Milestone C

Markup

<div class="wckd-carousel vertical columns count-1 height-25 gap-s filled-fade rounded padded hide-arrows height-20">
  <div class="column">Milestone A</div>
  <div class="column">Milestone B</div>
  <div class="column">Milestone C</div>
</div>

Ticker

Add .ticker and set data-ticker-px-sec for pixels-per-second speed; wckd-ui.js never adds arrows or dots on tickers. Give the root an aria-label when the motion is meaningful.

One · Two · Three

Four · repeat

Markup

<div class="wckd-carousel ticker columns count-2 gap uppercase padded" data-ticker-px-sec="40" aria-label="Ticker">
  <div class="column"><p>One · Two · Three</p></div>
  <div class="column"><p>Four · repeat</p></div>
</div>

When to use

Use horizontal mode for feature cards, testimonials, and product highlights.
Use peek mode when you want to visually signal that more content is available.
Use vertical and ticker variants for timelines, status feeds, and logo rails.

Implementation notes

Keep slide widths consistent within a carousel for smoother transitions.
Do not add padding/margin directly on .wckd-carousel > .column when precise width math matters; put spacing inside a child wrapper or on a parent wrapper around the carousel.
When you show arrow buttons, keep the carousel wrapper as the positioning context (position: relative) so .wckd-carousel-nav lines up with the slide strip.
Respect reduced motion settings for autoplay or ticker behaviour.
Provide visible controls when carousel content is critical to comprehension.

Developer checklist

Use .wckd-carousel with direct .column children for reliable initialisation.
Add outer spacing on a wrapper around the carousel, and inner spacing inside each column content (avoid changing direct slide box metrics unless intentional).
Arrows and dots are on by default. Add hide-arrows and/or hide-dots, or hide-nav for both. Ticker carousels never add arrows or dots.
If controls look vertically off, verify the wrapper around .wckd-carousel is position: relative (or another intended positioning context).
For vertical behaviour, apply a height utility (for example height-25) so movement is obvious.

← All components