LumoCSS | Lightweight CSS framework for semantic HTML

Components

Carousel

Carousels show a collection of items that can be scrolled on and off the screen.

Default

<div role="slider" aria-roledescription="carousel">
    <button type="button" data-prev aria-label="Previous slide"></button>
    <button type="button" data-next aria-label="Next slide"></button>
    <figure role="group" aria-label="Slide container">
        <img src="https://placehold.co/800x300" alt="Slide 1" role="group"
            aria-roledescription="slide">
        <div aria-roledescription="slide">
            <h3>lorem ipsum</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo mollitia
                sed vero
                recusandae, at illum quo alias nobis quibusdam optio.</p>
        </div>
        <div aria-roledescription="slide">
            <section>
                <article>
                    <h4>Column one</h4>
                    <p>Column content</p>
                </article>
                <article>
                    <h4>Column two</h4>
                    <p>Column content</p>
                </article>
            </section>
        </div>
        <img src="https://placehold.co/800x300" alt="Slide 2" role="group"
            aria-roledescription="slide">
    </figure>
</div>

Carousel navigation buttons becomes disabled when last or first carousel panel is reached.