Carousel

Image/content carousel with navigation.

Usage

<w-carousel label="Product images">
  <w-slot prev><button>Previous</button></w-slot>
  <w-slot next><button>Next</button></w-slot>

  <w-slot item><div>Slide 1</div></w-slot>
  <w-slot item><div>Slide 2</div></w-slot>
  <w-slot item><div>Slide 3</div></w-slot>

  <w-slot dots>
    <div>
      <w-slot dot><button></button></w-slot>
      <w-slot dot><button></button></w-slot>
      <w-slot dot><button></button></w-slot>
    </div>
  </w-slot>
</w-carousel>

Props

Prop	Type	Default	Description
value	number	0	Current slide index
loop	boolean	true	Loop at ends
autoplay	number	0	Auto-advance interval (ms), 0 to disable
label	string	""	Accessible label

Slots

Slot	Element	Description
item	Any	Carousel slides
prev	Button	Previous slide button
next	Button	Next slide button
indicators	Container	Indicator container
indicator	Button	Individual slide indicators

Events

Event	Detail	Description
change	{ value }	Slide changed

Methods

Method	Description
prev()	Go to previous slide
next()	Go to next slide
goTo(index)	Go to specific slide

Keyboard

Key	Action
ArrowLeft	Previous slide
ArrowRight	Next slide

Styling

The library positions the prev/next arrows absolutely and lays out the dots as a flex row — you only style aesthetics. State hooks: each indicator carries a data-indicator attribute, the active indicator gets class="active", and inactive slides are hidden via the [hidden] attribute.

/* Slide images and captions */
w-carousel w-slot[item] > * {
  /* each slide */
}

/* Arrows — already absolutely positioned by the library */
w-carousel w-slot[prev] > *,
w-carousel w-slot[next] > * {
  background: rgba(0, 0, 0, 0.5);
  color: white;
}

/* Indicator dots — already laid out as a centered flex row */
w-carousel [data-indicator] {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ccc;
}
w-carousel .active {
  /* The currently-displayed slide's dot */
  background: #6366f1;
}

/* Tweak the inset of the arrows from the edge */
w-carousel {
  --w-carousel-arrow-inset: 1rem;
}

Selector	Targets
w-carousel [data-indicator]	Every dot button
w-carousel .active	The dot for the currently shown slide
w-carousel w-slot[item] > *[hidden]	Off-screen slides
--w-carousel-arrow-inset	Distance of arrows from the edge (custom property)

Accessibility

• Container has role="region" with aria-roledescription="carousel"
• aria-label from label prop
• Live region announces slide changes
• Pause on hover/focus when autoplaying