react-fullscreen-carousel

react-fullscreen-carousel

React fullscreen image carousel component for desktop and mobile
Demo

Install

npm i react-fullscreen-carousel

or

yarn add react-fullscreen-carousel

Example

import React from 'react';
import { ReactFullscreenCarousel } from 'react-fullscreen-carousel';

const data = [
    { img: "https://picsum.photos/400", alt: "image" },
    { img: "https://picsum.photos/500", alt: "image" },
    { img: "https://picsum.photos/600", alt: "image" },
    { img: "https://picsum.photos/700", alt: "image" },
    { img: "https://picsum.photos/650", alt: "image" },
    { img: "https://picsum.photos/750", alt: "image" },
];

const MyComponent: React.FC = () => {

    const [open, setOpen] = React.useState(false);

    return (
        <main>
            {open ?
                <ReactFullscreenCarousel slides={data} handleClose={() => setOpen(false)} startSlideIndex={0} />
                : null
            }
            <button onClick={() => setOpen(true)}>Open images</button>
        </main>
    );
};

export default MyComponent;

Example with custom buttons

import React from 'react';
import { ReactFullscreenCarousel } from 'react-fullscreen-carousel';

const data = [
    { img: "https://picsum.photos/400", alt: "image" },
    { img: "https://picsum.photos/500", alt: "image" },
    { img: "https://picsum.photos/600", alt: "image" },
    { img: "https://picsum.photos/700", alt: "image" },
    { img: "https://picsum.photos/650", alt: "image" },
    { img: "https://picsum.photos/750", alt: "image" },
];

const MyComponent: React.FC = () => {

    const [open, setOpen] = React.useState(false);

    return (
        <main>
            {open ?
                <ReactFullscreenCarousel slides={data} handleClose={() => setOpen(false)} 
                    closeButtonElement={(onClick: () => void) => <MyCustomCloseButton onClick={onClick} />}
                    prevButtonElement={(onClick: () => void) => <MyCustomPrevButton onClick={onClick} />}
                    nextButtonElement={(onClick: () => void) => <MyCustomNextButton onClick={onClick} />}
                />
                : null
            }
            <button onClick={() => setOpen(true)}>Open images</button>
        </main>
    );
};

export default MyComponent;