Control slide number

To open the gallery on a different slide than the first, specify the desired slide by using one of the three props: "slide" (integer), "sourceIndex" (integer, slide number minus one), or "source" (string, the source's URL or path itself).

function App() {
	const [lightboxController, setLightboxController] = useState({
		toggler: false,
		slide: 1
	});

	function openLightboxOnSlide(number) {
		setLightboxController({
			toggler: !lightboxController.toggler,
			slide: number
		});
	}

	return (
		<>
			<button onClick={() => openLightboxOnSlide(1)}>
				Open the lightbox on the first slide.
			</button>
			<button onClick={() => openLightboxOnSlide(2)}>
				Open the lightbox on the second slide.
			</button>
			<FsLightbox
				toggler={lightboxController.toggler}
				sources={[
					"/Images/1.jpg",
					"/Images/2.jpg"
				]}
				slide={lightboxController.slide}
			/>
		</>
	);
}

In the above example there is presented the usage of the "slide" prop. The two other props—"sourceIndex" and "source"—are used analogously.