Thumbnails Plugin
Thumbnails plugin adds thumbnails track to the lightbox.
The plugin comes with an additional CSS stylesheet.
import "yet-another-react-lightbox/plugins/thumbnails.css";
Documentation
Thumbnails plugin adds the following Lightbox
properties.
Property | Type | Description |
---|---|---|
thumbnails | { | Thumbnails plugin settings:
Defaults: { position: "bottom", width: 120, height: 80, border: 1, borderRadius: 4, padding: 4, gap: 16, imageFit: "contain", vignette: true } |
render | { | Custom thumbnail render function. |
Example
import Lightbox from "yet-another-react-lightbox";
import Thumbnails from "yet-another-react-lightbox/plugins/thumbnails";
import "yet-another-react-lightbox/styles.css";
import "yet-another-react-lightbox/plugins/thumbnails.css";
// ...
<Lightbox
open={open}
close={() => setOpen(false)}
slides={slides}
plugins={[Thumbnails]}
/
Live Demo
You can adjust the live demo settings below.