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

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