# React carousel with lightbox gallery

> Native React carousel component, an inline slider that expands into a full-screen lightbox, with thumbnails, pinch zoom and captions.

Render @lightgallery/react inside your own element instead of a full-screen overlay and you get a carousel: the same slides, gestures, thumbnails and plugins, laid out in the page. Clicking the maximize icon turns it into the lightbox. The full component API is in the [React package docs](https://www.lightgalleryjs.com/docs/react/).

Canonical page: https://www.lightgalleryjs.com/demos/react-carousel/

#### Demo

##### Inline carousel

Pass a `container` element and the gallery mounts there instead of on
`document.body`, picking up the `lg-inline` layout. Keep it `open`, turn
`closable` off so it stays put, and leave the maximize icon on so viewers can
still go full screen:

```tsx
import { useState } from 'react';
import { LightGallery } from '@lightgallery/react';
import Thumbnail from '@lightgallery/react/plugins/thumbnail';
import Zoom from '@lightgallery/react/plugins/zoom';

import 'lightgallery/css/lightgallery.css';
import 'lightgallery/css/lg-thumbnail.css';
import 'lightgallery/css/lg-zoom.css';

const items = [
    {
        src: 'img/1-1600.jpg',
        thumb: 'img/1-240.jpg',
        alt: 'Mountains',
        caption: <h4>Mountains</h4>,
    },
    {
        src: 'img/2-1600.jpg',
        thumb: 'img/2-240.jpg',
        alt: 'Forest path',
        caption: <h4>Forest path</h4>,
    },
];

export function Carousel() {
    const [container, setContainer] = useState<HTMLElement | null>(null);

    return (
        <>
            <div className="inline-gallery-container" ref={setContainer} />
            {container && (
                <LightGallery
                    container={container}
                    open
                    closable={false}
                    showMaximizeIcon
                    slides={items}
                    plugins={[Thumbnail, Zoom]}
                />
            )}
        </>
    );
}
```

The `container` state (rather than a plain ref) is what makes this work in
React: the element has to exist before the gallery renders into it, and a
state update re-renders once the div is mounted.

##### CSS

The inline gallery fills its container, so give the container a size. A
percentage bottom padding keeps a fixed aspect ratio:

```scss
.inline-gallery-container {
    width: 100%;
    height: 0;
    padding-bottom: 65%;
}
```

##### Settings worth knowing

| Prop | Why |
| --- | --- |
| `closable={false}` | Vertical swipe-to-close is disabled with it, the carousel stays in the page |
| `showMaximizeIcon` | Adds the toolbar button that expands the carousel into the lightbox |
| `slideDelay` | Delays the slide transition, useful when the carousel drives another element |
| `captionPosition` | `'bar'` (default) or `'slide'` to move captions onto the media |

More in the [React package docs](/docs/react/), or see the
[React image gallery](/demos/react-image-gallery/) and
[React video carousel](/demos/react-video-carousel/) demos.