Early Access

Carousel

Horizontally scrolls through a set of columns, creating an engaging slideshow effect.

Carousel Example

<div class="columns count-2 gap-tight wckd-carousel show-nav show-next-slide show-dots">
	<div class="column">
		<img src="https://cdn.wckd.ca/image/placeholder-square.gif" />
	</div>
	<div class="column">
		<img src="https://cdn.wckd.ca/image/placeholder-square.gif" />
	</div>
	<div class="column">
		<img src="https://cdn.wckd.ca/image/placeholder-square.gif" />
	</div>
	<div class="column">
		<img src="https://cdn.wckd.ca/image/placeholder-square.gif" />
	</div>
</div>

Carousel HTML Structure

section
- div.columns.count-[1 to 6].wckd-carousel
  - div.column

Carousel Options

show-nav: Add Next/Prev arrows
show-dots: Add pagination dots
show-next-slide: Next slide will peak
ticker: Continuous scroll
vertical: switch to vertical

Updates

Jan 16, 2025: added "ticker" for continuous scrolling
Feb 25, 2026: Added dots, vertical scroll