Atlıkarınca Kapsayıcısı

Amaç

Dönen slayt gösterisi, iç içe geçmiş öğeleri sırayla görüntülemek için kullanılan bir konteynerdir. Medya içeriğini görüntülemek için kullanışlıdır ve ayrıca auto özniteliği aracılığıyla zaman aşımıyla bir sonraki öğeye otomatik geçişi etkinleştirmenize olanak tanır.

Kullanım

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

const { observe } = useCarousel();

export const App = () => {
    useEffect(() => {
        const unobserve = observe((event) => {
            // atlıkarınca (carousel) etkinliklerini yönet
        });
        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>;
};

Türler

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