Components

Carousel

Put .wckd-carousel on the same node as .columns; each slide is a direct .column child. wckd-ui.js adds prev/next + dots unless you add hide-arrows, hide-dots, or hide-nav. Modifiers: .vertical (+ height utility), .peek-left / .peek-right, .ticker + data-ticker-px-sec (tickers never get arrows/dots). Optional data-threshold on the root only when slides contain .animate.

Jump to:

Download & setup

Download WCKD UI Style guide

Load the kit from Get Started; use the style guide for utilities and tokens while wiring this component.

Default implementation

Standard carousel

Default: arrows + dots. Add hide-arrows, hide-dots, or hide-nav to strip part or all of that chrome.

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

Each variant keeps the same markup contract as the default; add only the classes or attributes named in the heading.

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

count-* on the carousel row sets visible columns; nav stays 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 and a height utility (e.g. height-25) so vertical scroll is obvious. This demo uses hide-arrows (arrows are tuned for horizontal strips).

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 + data-ticker-px-sec; no arrows/dots. Set aria-label on the root when the motion carries meaning.

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

  • Feature strips, testimonials, and product highlights.
  • Peek strips and tickers when you need “more content” cues or ambient motion.

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