WCAG Carousel

The <wcag-carousel> is an accessible, customizable web component for displaying a set of slides. It supports keyboard navigation, screen reader announcements, and optional auto-play, ensuring compliance with WCAG standards.

Properties

Attributes

Name

autoStart

Type

boolean

Description

When set to true, the carousel automatically starts cycling through slides on page load. Default is false.

Usage

To use the <wcag-carousel>, include it in your HTML and provide the slides using the slide slot. The component manages slide transitions, keyboard navigation, and visual indicators.

    
        <wcag-carousel>
            <div slot="slide" class="w-full">
                <img src="/images/carouselImageOne.png" alt="Slide 1" />
            </div>
            <div slot="slide" class="w-full">
                <img src="/images/carouselImageTwo.png" alt="Slide 2" />
            </div>
            <div slot="slide" class="w-full">
                <img src="/images/carouselImageThree.png" alt="Slide 3" />
            </div>
        </wcag-carousel>

Methods

`nextSlide()`

Moves the carousel to the next slide. Automatically pauses the auto-play feature if it is active.

`prevSlide()`

Moves the carousel to the previous slide. Automatically pauses the auto-play feature if it is active.

`startAutoRunner()`

Starts the auto-runner for cycling through slides at a set interval. Useful for restarting the auto-play after it has been paused.

`pauseAutoRunner()`

Pauses the auto-runner temporarily, resuming it after 5 seconds of inactivity.

Styling

The <wcag-carousel> uses custom styles defined in wcag-carousel.css and default styles for flex layout and transitions. Adjust the styles in the CSS file to fit your design requirements.

Carousel element