Slideshow / Carousel

Image slideshow/carousel element for displaying multiple images with thumbnail navigation.

Live Preview

Code

1<div class="slideshow" role="region" aria-label="Image carousel">
2  <div class="slideshow__viewport">
3    <div class="slideshow__track" style="transform: translateX(-0%)">
4      <div class="slideshow__slide">
5        <img src="/slide-1.jpg" alt="Slide 1" />
6      </div>
7      <div class="slideshow__slide">
8        <img src="/slide-2.jpg" alt="Slide 2" />
9      </div>
10      <div class="slideshow__slide">
11        <img src="/slide-3.jpg" alt="Slide 3" />
12      </div>
13    </div>
14  </div>
15
16  <!-- Navigation Arrows -->
17  <button class="slideshow__prev" aria-label="Previous slide">
18    <svg viewBox="0 0 24 24"><path d="M15 19l-7-7 7-7" /></svg>
19  </button>
20  <button class="slideshow__next" aria-label="Next slide">
21    <svg viewBox="0 0 24 24"><path d="M9 5l7 7-7 7" /></svg>
22  </button>
23
24  <!-- Pagination Dots -->
25  <div class="slideshow__dots">
26    <button class="slideshow__dot slideshow__dot--active" aria-label="Go to slide 1"></button>
27    <button class="slideshow__dot" aria-label="Go to slide 2"></button>
28    <button class="slideshow__dot" aria-label="Go to slide 3"></button>
29  </div>
30</div>

Brand Properties

Carousel Container

Property	Type	Brand Default	HoB Value	TAE Value
Margins Top	Input (px)	20	20	20
Margins Right	Input (px)	0	0	0
Margins Bottom	Input (px)	20	20	20
Margins Left	Input (px)	0	0	0
Padding	Input (px)	0	0	0
Max Width	Input (px)	500	500	500
Image source 1	Text input	(URL)	(URL)	(URL)
Image source 2	Text input	(URL)	(URL)	(URL)
Image source 3	Text input	(URL)	(URL)	(URL)
Image source 4	Text input	(URL)	(URL)	(URL)
Image source 5	Text input	(URL)	(URL)	(URL)
Image source 6	Text input	(URL)	(URL)	(URL)
Image source 7	Text input	(URL)	(URL)	(URL)
Image source 8	Text input	(URL)	(URL)	(URL)
Image source 9	Text input	(URL)	(URL)	(URL)
Image source 10	Text input	(URL)	(URL)	(URL)

Main Image

Property	Type	Brand Default	HoB Value	TAE Value
Aspect Ratio	Toggle	Original	Original	Original
Image Width	Slider	500 px	500 px	500 px
Image Position	9-position grid	center	center	center
Border Style	Dropdown	none	none	none
Opacity	Slider	100%	100%	100%
Shadow	Toggle	Off	Off	Off

Image List (Thumbnails)

Property	Type	Brand Default	HoB Value	TAE Value
Image Position	9-position grid	center	center	center
Margins Top	Input (px)	0	0	0
Margins Right	Input (px)	10	10	10
Margins Bottom	Input (px)	10	10	10
Margins Left	Input (px)	0	0	0
Padding	Input (px)	0	0	0
Opacity	Slider	100%	100%	100%
Shadow	Toggle	Off	Off	Off

Accessibility

Use role="region" with aria-label on the container
Navigation buttons need descriptive aria-label attributes
Include aria-live="polite" for auto-playing carousels
Provide pause controls for auto-playing content
Ensure all images have meaningful alt text
Support keyboard navigation (arrow keys, tab)
Thumbnails should indicate current selection (aria-current)

Do's and Don'ts

Do

Provide manual navigation controls
Include pause functionality for auto-play
Optimize images for fast loading
Use swipe gestures on touch devices
Show clear position indicators

Don't

Auto-play with no way to stop
Use very fast auto-advance speeds
Hide critical information in carousels
Create carousels with too many slides
Use carousels for the only way to access content

Unmapped Brand Values

The following brand-specific design tokens are available but not directly mapped to CRAFT carousel properties:

Token	HoB Value	TAE Value
Border Radius (sm)	4px	4px
Border Radius (md)	8px	8px
Border Radius (lg)	12px	12px
Shadow (sm)	Available	Available
Shadow (md)	Available	Available
Primary Color	-	-
Background Color	-	-
Surface Color	-	-

Related Elements

Image - Single image display
Video - Video player element