React.js react-fullscreen-carousel Example to Display Multiple Images in Full Screen Carousel in Browser Using Javascript

Welcome folks today in this blog post we will be using the react-fullscreen-carousel library to display multiple images in carousel in browser using javascript. All the full source code of the application is shown below.

Get Started

In order to get started you need to make a new react.js app using the below command as shown below

npx create-react-app sampleapp

cd sampleapp

And after that you need to install the below library using the below command as shown below

npm i react-fullscreen-carousel

And after that you will see the below directory structure of the react.js app as shown below

Displaying Multiple Images in Carousel

Now we can modify the App.js file and copy paste the following code

App.js

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" },
];

export default function App(){

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

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" },

];

export default function App(){

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>

);

};

As you can see we are importing the react-fullscreen-carousel library at the top and then we have declared an array of images from the url and then we are displaying the react full screen carousel and here we are having the previous and next buttons and then we have the button to open the images inside the carousel.