Inline Plugin

The Inline plugin transforms the lightbox into an image carousel that renders inline on the webpage.

Documentation

The plugin adds and overrides the following Lightbox properties.

PropertyTypeDescription
inlineReact.HTMLAttributes​<HTMLDivElement>

HTML div element attributes to be passed to the Inline plugin container.

Defaults: { style: { width: "100%", height: "100%" } }

opentrueThis prop is ignored.
close() => {}This prop is ignored.
controller.focusfalseThis prop is ignored.
toolbar.buttons(React.ReactNode | "close")[]The "close" button is ignored.

Example

import Lightbox from "yet-another-react-lightbox";
import Inline from "yet-another-react-lightbox/plugins/inline";
import "yet-another-react-lightbox/styles.css";

// ...

return (
  <div style={{ width: "100%", maxWidth: "900px", aspectRatio: "3 / 2" }}>
    <Lightbox
      plugins={[Inline]}
      // ...
    />
  </div>
);

// or

return (
  <Lightbox
    plugins={[Inline]}
    inline={{
      style: { width: "100%", maxWidth: "900px", aspectRatio: "3 / 2" },
    }}
    // ...
  />
);

Live Demo

Image carousel:

Image carousel with imageFit: "cover":

Image carousel with Fullscreen, Slideshow, Thumbnails and Zoom plugins:

Sandbox

Edit on StackBlitz