Carousel container

Purpose

A carousel is a container for sequentially viewing nested elements. It is useful for displaying media content, and also allows you to enable automatic transition to the next item by timeout via auto attribute.

Usage

import { useEffect } from 'react';
import { useCarousel } from 'effsz/carousel';

const { observe } = useCarousel();

export const App = () => {
    useEffect(() => {
        const unobserve = observe((event) => {
            // handle carousel events
        });
        return () => unobserve();
    }, [])
    return <effsz-carousel type='slide'>
        <div slot='bef'>bef</div>
        <div slot='aft'>aft</div>
        <div>1 item</div>
        <div>2 item</div>
        <div>3 item</div>
        <div>4 item</div>
        <div>5 item</div>
    </effsz-carousel>;
};

Types

/**
 * Carousel container attributes
 */
export interface ICarouselContainerAttrs {
    /**
     * Main axis
     */
    axis: 'x' | 'y';
    /**
     * Start item index
     */
    ini: string;
    /**
     * Time interval for auto play in ms
     */
    auto: string;
    /**
     * Carousel animation type
     */
    type: 'slide' | 'fade' | 'flip';
    /**
     * Swipe distance in px to show prev/next item
     * @description
     * `30` by default. If equals `0` then container won't use swipe actions
     */
    swipe: number;
    /**
     * Carousel animation timing-function
     */
    tf: string;
    /**
     * Carousel animation duration
     */
    dur: string;
    /**
     * Size of before slot
     */
    bef: string;
    /**
     * Size of after slot
     */
    aft: string;
}

/**
 * Carousel container
 */
export interface ICarouselContainerElement extends HTMLElement {
    /**
     * Active item index
     */
    get active(): number | null;
    /**
     * All items
     */
    get items(): HTMLElement[];
    /**
     * Show next item
     */
    next(): Promise<void>;
    /**
     * Show prev item
     */
    prev(): Promise<void>;
    /**
     * Show specified item
     */
    show(index: number): Promise<void>;
}