dioada-carousel

A bare-bones carousel that uses a flex container to ensure that all items are the same height (the height of the tallest).

Features:

• Swipe navigation via mouse or touch
• Navigation via the keyboard

Other navigation needs to be implemented separately. See, below, for an example of button and indicator navigation.

Installation

1. Via package installation

npm install dioada-carousel

import carousel from "dioada-carousel";
import "/path/to/node_modules/dioada-carousel/dist/dioada-carousel.css";

2. Via file links

Download the code zip and extract dist/dioada-carousel.js and dist/dioada-carousel.css.

<script type="text/javascript" src="/path/to/dioada-carousel.js"></script>
<link href="/path/to/dioada-carousel.css" rel="stylesheet" />

Note: when installed via file links, the component is prefixed as dioada.carousel.

HTML

<dioada-carousel idx="2" duration="0.25">
    <dioada-carousel-items>
        <dioada-carousel-item>
            <h2>Slide 1</h2>
        </dioada-carousel-item>
        <dioada-carousel-item>
            <h2>Slide 2</h2>
        </dioada-carousel-item>
    </dioada-carousel-items>
</dioada-carousel>

Each dioada-carousel-item has display: flex and takes up the full width and height of the container. Apply any padding and alignment to an immediate child node of the item.

Initialize

carousel();

// Or with non-default options
carousel({});

Name	Attribute	Default	Description
selector	n/a	"dioada-carousel"	The carousel selector.
idx	idx	0	The active slide index.
duration	duration	0.6	The slide duration in seconds.
timingFunction	timing-function	"ease-out"	The timing function used by the slide transition.
keyboard	keyboard	true	If true, pressing the left arrow key, the right arrow key, the Home key and the End key navigate to the previous, next, first and last slide respectively. A tabindex is attached to the carousel to allow for this functionality.
swipe	swipe	true	If true, swiping left and right navigates to the previous and next slide respectively.
ariaHideInactive	aria-hide-inactive	true	If true, inactive slides are aria hidden. If false, role="list" is attached to dioada-carousel-items and role="list-item" to each dioada-carousel-item.

Events

dioada.carousel.nav

Fires as soon as the active slide index changes.

carousel().node.addEventListener("dioada.carousel.nav", e => {
    if (e.last) {
        // do something...
    }
});

Name	Description
item	The active slide node
from	The previous slide index
to	The active slide index
first	true if the active slide is the first
last	true if the active slide is the last

Methods

Name	Description
node	Returns the carousel DOM node
itemCount	Returns the number of slides
idx	Gets or sets the active slide index
next	Navigates to the next slide
prev	Navigates to the previous slide

Example

This example shows how to implement navigation via a previous/next button and indicators. See the demo for a full implementation.

<dioada-carousel>
    <dioada-carousel-items>
        <dioada-carousel-item> Slide 1 </dioada-carousel-item>
        <dioada-carousel-item> Slide 2 </dioada-carousel-item>
    </dioada-carousel-items>
</dioada-carousel>
<div class="navigation">
    <button type="button" aria-label="Previous slide" disabled>Previous slide</button>
    <button type="button" aria-label="Next slide">Next slide</button>
</div>
<ul class="indicators" aria-label="Slideshow navigation">
    <li><button type="button" data-idx="0" aria-current="true" aria-label="Go to slide 1" /></li>
    <li><button type="button" data-idx="1" aria-current="false" aria-label="Go to slide 2" /></li>
</ul>

import "/path/to/node_modules/dioada-carousel/dist/dioada-carousel.css";
import dioadaCarousel from "dioada-carousel";

export default function () {
    const carousel = dioadaCarousel(),
        btns = document.querySelectorAll(".navigation button"),
        indicators = document.querySelectorAll(".indicators button");

    carousel.node.addEventListener("dioada.carousel.nav", e => {
        e = e.detail;
        if (e.first) {
            btns[0].setAttribute("disabled", "disabled");
        } else {
            btns[0].removeAttribute("disabled");
        }
        if (e.last) {
            btns[1].setAttribute("disabled", "disabled");
        } else {
            btns[1].removeAttribute("disabled");
        }
        indicators[e.from].setAttribute("aria-current", "false");
        indicators[e.to].setAttribute("aria-current", "true");
    });

    btns[0].addEventListener("click", carousel.prev);
    btns[1].addEventListener("click", carousel.next);

    document.querySelector(".indicators").addEventListener("click", e => carousel.idx(parseInt(e.target.dataset.idx, 10)));
}

.indicators {
    button {
        &[aria-current="true"] {
            // Highlight it
        }
    }
}