Карусель

Назначение

Карусель - это контейнер для последовательного просмотра вложенных элементов. Она полезна для отображения медиаконтента, а также позволяет включить автоматический переход к следующему элементу по таймауту с помощью атрибута auto.

Использование

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>;
};

Типизация

/**
 * 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>;
}