Image gallery

This is a carousel with images. Use the previous and next buttons to navigate, or jump to a slide using the slide dots.

Previous

Next

<Docs title="ImageElement / landscape" layout="fullscreen">
	<ImageElement
		image={landscapeImage}
		caption="Landscape format image - Single image"
	/>
</Docs>

<Docs title="ImageElement / portrait" layout="fullscreen">
	<ImageElement
		image={portraitImage}
		caption="Portrait format image - Single image"
	/>
</Docs>

<Docs title="ImageElement / square" layout="fullscreen">
	<ImageElement
		image={squareImage}
		caption="Square format image - Single image"
	/>
</Docs>

<Docs title="ImageElement / Layout In Accordion" layout="fullscreen">
	<ImageElement
		layout="in-accordion"
		image={landscapeImage}
		caption="For use in Product Detail Page"
	/>
</Docs>

<Docs title="Video/default" layout="fullscreen">
	<VideoElement
		video={videoExample}
		caption="Video Caption (optional) - Single image"
	/>
</Docs>

<Docs title="Slider/default" layout="fullscreen">
	<ImageSlider
		items={[
			{ image: landscapeImage },
			{ image: portraitImage },
			{ image: squareImage },
		]}
		client:idle
	/>
</Docs>

<Docs title="Slider/with captions" layout="fullscreen">
	<ImageSlider
		items={[
			{ image: landscapeImage, caption: "Slide 1" },
			{ image: portraitImage, caption: "Slide 2" },
			{ image: squareImage, caption: "Slide 3" },
		]}
		client:idle
	/>
</Docs>

<Docs title="Full Width" layout="fullscreen">
	<p>Scroll down …</p>
	<div style="height: 120vh"></div>
	<MediaFullWidth
		image={landscapeImage}
		caption="Media Full Width Caption (optional)"
		client:load
	/>
	<div style="height: 120vh"></div>
	<p>Scroll up …</p>
</Docs>