Slideshow Plugin

Slideshow plugin adds slideshow autoplay feature to the lightbox.

Documentation

The plugin adds the following Lightbox properties.

PropertyTypeDescription
slideshow

{
  autoplay?: boolean;
  delay?: number;
}

Slideshow plugin settings:

  • autoplay - if true, slideshow is turned on automatically when the lightbox opens
  • delay - slideshow delay in milliseconds

Defaults: { autoplay: false, delay: 3000 }

render

{
  iconSlideshowPlay?: () => React.ReactNode;
  iconSlideshowPause?: () => React.ReactNode;
  buttonSlideshow?: ({
  playing,
  togglePlaying,
  disabled
} : {
  playing: boolean;
  togglePlaying: () => void;
  disabled: boolean;
{) => React.ReactNode;
}

Custom render functions:

  • iconSlideshowPlay - render custom Slideshow Play icon
  • iconSlideshowPause - render custom Slideshow Pause icon
  • buttonSlideshow - render custom Slideshow button

Example

import Lightbox from "yet-another-react-lightbox";
import Slideshow from "yet-another-react-lightbox/plugins/slideshow";
import "yet-another-react-lightbox/styles.css";

// ...

<Lightbox
  open={open}
  close={() => setOpen(false)}
  slides={slides}
  plugins={[Slideshow]}
/>

Live Demo

You can adjust the live demo settings below.

CodeSandbox

Edit on CodeSandbox