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.

CodeSandbox

Edit on CodeSandbox