Observing image change in autoplay slideshow carousel

[hus-o]

So I want to have an inline slideshow and underneath this slideshow I want to show corresponding captions.

However as the slideshow is autoplay I'm not sure the best way to watch for the slide changes on the carousel. I tried to use a ref on the lightbox controller and slideshow as below but neither tracks the image change for me to update the index to show the correct slide caption.

  const [slideIndex, setSlideIndex] = useState(0)
  
  const lightboxRef = useCallback((node: ControllerRef) => {
    if (node !== null) {
      setSlideIndex(node.getLightboxState().currentIndex)
    }
  },[])

  return (
    <>

      <Lightbox
        controller={{ ref: lightboxRef }}
        slides={slides}
        inline={inline}
        slideshow={{autoplay: true}}
        carousel={{
          spacing: 0,
          padding: 0,
          imageFit: "cover",
        }}
        plugins={[Inline, Slideshow]}
      />
      <p>{slides[slideIndex].caption}</p>

[igordanchenko]

You can use the on.view callback to keep track of the slide index.

const [index, setIndex] = React.useState(0);

// ...

<Lightbox
  index={index}
  on={{ view: ({ index: currentIndex }) => setIndex(currentIndex) }}
  // ...
/>

[hus-o]

Brilliant, thank you

[thaiduongnguyen17]

hi, I have problem, when I change index image, animation not work ((