Demos

React carousel with lightbox gallery

View as Markdown Open in Claude Open in ChatGPT

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.

Demo

Open in StackBlitz

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:

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:

.inline-gallery-container {
    width: 100%;
    height: 0;
    padding-bottom: 65%;
}
Settings worth knowing
PropWhy
closable={false}Vertical swipe-to-close is disabled with it, the carousel stays in the page
showMaximizeIconAdds the toolbar button that expands the carousel into the lightbox
slideDelayDelays 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, or see the React image gallery and React video carousel demos.

Edit this page on GitHub