Slideshow Plugin

Slideshow plugin adds slideshow autoplay feature to the lightbox.

Documentation

The plugin adds the following Lightbox properties.

PropertyTypeDescription
slideshow

{
  ref?: React.ForwardedRef​<SlideshowRef>;
  autoplay?: boolean;
  delay?: number;
}

Slideshow plugin settings:

  • ref - Slideshow plugin ref. See Slideshow Ref for details.
  • 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?: (props: SlideshowRef) => React.ReactNode;
}

Custom render functions:

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

{
  slideshowStart?: () => void;
  slideshowStop?: () => void;
}

Lifecycle callbacks.

  • slideshowStart - a callback called on slideshow playback start
  • slideshowStop - a callback called on slideshow playback stop

Slideshow Ref

The Slideshow plugin provides a ref object to control the plugin features externally.

// Slideshow ref usage example

const slideshowRef = React.useRef(null);

// ...

return (
  <Lightbox
    plugins={[Slideshow]}
    slideshow={{ ref: slideshowRef }}
    on={{
      click: () => {
        (slideshowRef.current?.playing
          ? slideshowRef.current?.pause
          : slideshowRef.current?.play)?.();
      },
    }}
    // ...
  />
);
PropertyTypeDescription
playingbooleanCurrent slideshow playback status.
disabledboolean
If true, the slideshow playback is disabled.
play() => voidStart the slideshow playback.
pause() => voidPause the slideshow playback.

Example

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

// ...

return (
  <Lightbox
    plugins={[Slideshow]}
    // ...
  />
);

Live Demo

You can adjust the live demo settings below.

Sandbox

Edit on StackBlitz