welcome-ui/dist/types/components/Swiper/index.d.ts

Customizable design system with react • styled-components • styled-system and ariakit.

import { CreateWuiProps } from '../System';
export interface UseSwiperProps {
    autoplay?: boolean;
    /** If true the swiper will begin at the middle */
    centeredSlides?: boolean;
    duration?: number;
    /** Won't be used if centeredSlides is true */
    firstSlideToShow?: number;
    fullWidth?: boolean;
    id?: string;
    loop?: boolean;
    /** Size of left and right navigation arrows */
    navigationSize?: 'lg' | 'md' | 'sm' | 'xs';
    /** Number of slides to show per view */
    slidesPerView?: {
        desktop: number;
        mobile: number;
        tablet: number;
    };
    /** Space between each slides */
    spaceBetween?: number;
    /** Use black colors for the pagination and arrows in case of slides too bright */
    withDarkUI?: boolean;
    /** Show left and rigth navigation arrows on mobile/tablet or/and desktop */
    withNavigation?: {
        desktop: boolean;
        mobile: boolean;
    };
    /** Show bottom pagination on mobile/tablet or/and desktop */
    withPagination?: {
        desktop: boolean;
        mobile: boolean;
    };
}
export declare const useSwiper: (options?: UseSwiperProps) => {
    autoplay: boolean;
    centeredSlides: boolean;
    currentPage: number;
    currentSlidesPerView: number;
    duration: number;
    firstSlideToShow: number;
    fullWidth: boolean;
    id: string;
    navigationSize: "sm" | "md" | "xs" | "lg";
    ref: import('react').MutableRefObject<HTMLUListElement>;
    setCurrentPage: import('react').Dispatch<import('react').SetStateAction<number>>;
    setShowLeftArrow: import('react').Dispatch<import('react').SetStateAction<boolean>>;
    setShowRightArrow: import('react').Dispatch<import('react').SetStateAction<boolean>>;
    shouldLoop: boolean;
    showLeftArrow: boolean;
    showRightArrow: boolean;
    slidesPerView: {
        desktop: number;
        mobile: number;
        tablet: number;
    };
    spaceBetween: number;
    withDarkUI: boolean;
    withNavigation: {
        desktop: boolean;
        mobile: boolean;
    };
    withPagination: {
        desktop: boolean;
        mobile: boolean;
    };
};
export type SwiperInitialProps = {
    children: JSX.Element | JSX.Element[];
    dataTestId?: string;
    store: UseSwiper;
};
export type SwiperProps = CreateWuiProps<'div', SwiperInitialProps>;
export type UseSwiper = ReturnType<typeof useSwiper>;
export declare const Swiper: {
    ({ children, dataTestId, store, ...rest }: SwiperProps): import("react/jsx-runtime").JSX.Element;
    displayName: string;
};
export declare const StyledSwiper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;