Function useImageGallery

A custom hook that manages the main and thumbnail Swiper configurations for the ImageGallery component, including responsive breakpoints and styling.

Example

const { mainSwiperProps, thumbsSwiperProps } = useImageGallery(0);
<Swiper {...mainSwiperProps} />
<Swiper {...thumbsSwiperProps} />
  • useImageGallery(
        initialIndex: number,
    ): {
        isLarge: boolean;
        mainSwiperProps: SwiperProps;
        styles: {
            dummyIndex: { opacity: number };
            mainImgStyle: {
                borderRadius: string;
                height: string;
                objectFit: string;
                width: string;
            };
            swiperFadeLeft: { background: string; left: number };
            swiperFadeOverlay: {
                bottom: number;
                pointerEvents: string;
                position: string;
                top: number;
                width: string;
                zIndex: number;
            };
            swiperFadeRight: { background: string; right: number };
            thumbSwiperSlide: {
                alignItems: string;
                cursor: string;
                display: string;
                height: string;
                justifyContent: string;
                maxWidth: string;
                width: string;
            };
        };
        thumbsSwiperProps: SwiperProps;
    }

    Parameters

    • initialIndex: number

      The initial index of the main Swiper slide.

    Returns {
        isLarge: boolean;
        mainSwiperProps: SwiperProps;
        styles: {
            dummyIndex: { opacity: number };
            mainImgStyle: {
                borderRadius: string;
                height: string;
                objectFit: string;
                width: string;
            };
            swiperFadeLeft: { background: string; left: number };
            swiperFadeOverlay: {
                bottom: number;
                pointerEvents: string;
                position: string;
                top: number;
                width: string;
                zIndex: number;
            };
            swiperFadeRight: { background: string; right: number };
            thumbSwiperSlide: {
                alignItems: string;
                cursor: string;
                display: string;
                height: string;
                justifyContent: string;
                maxWidth: string;
                width: string;
            };
        };
        thumbsSwiperProps: SwiperProps;
    }

    An object containing:

    • isLarge: Boolean indicating if the viewport is large.
    • styles: CSS styles for the Swiper overlays and thumbs.
    • mainSwiperProps: Props for the main Swiper instance.
    • thumbsSwiperProps: Props for the thumbnails Swiper instance.

Settings

Member Visibility