Gallery Carousel

How to use

<Section columns={1}>
<Markdown>

# NAME

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.

</Markdown>

import GalleryCarousel from "~/components/mdx/integrations/swiper/GalleryCarousel.astro";
import Image1 from "~/assets/jpg/arthur-mazi-6148mnVnY-s-unsplash.jpg";
import Image2 from "~/assets/jpg/dylann-hendricks-67c1geZr1eE-unsplash.jpg";
import Image3 from "~/assets/jpg/hayden-walker-ihiEd-_4TNY-unsplash.jpg";
import Image4 from "~/assets/jpg/mick-nsenga-50XwniKxiXI-unsplash.jpg";

<GalleryCarousel
  images={[
    { src: Image1, alt: "Low angle photography of grey high rise building" },
    { src: Image2, alt: "Greyscale photo of a ferris wheel" },
    { src: Image3, alt: "Person's right hand near newspaper" },
    { src: Image4, alt: "Greyscale photo of glass window" },
  ]}
/>

</Section>

Props

Prop	Type	Description
images	array of objects	An array of image objects.
class	string	(optional) Additional classes applied to the root <div>.
(extends)	HTMLAttributes<"div">	(optional) All standard HTML attributes for a <div>.

image object

• src — ImageMetadata
  The imported image metadata (output from Astro’s image import).
• alt — string
  (optional) Alt text for the image, defaults to empty string "".

The images prop is an array of image objects.

Useful links

• Swiper Documentation
• Unsplash for free stock images and art