Reflext Gallery
The Reflext Gallery component is a compact and interactive reflext gallery, ideal for responsive navigation. It offers a toggleable design with smooth animations, making it a versatile choice for modern web applications.
Usage
Follow the steps below to add the Reflext Gallery Component to your project.
1
Add the import statement for the component
import ReflextGallery from "@/components/elixir-ui/reflext-gallery"; 2
Add the images props to the component
const images = [
{ src: "https://plus.unsplash.com/premium_photo-1682096467444-8861e1dc3bc2", alt: "image 1" },
{ src: "https://plus.unsplash.com/premium_photo-1682096252599-e8536cd97d2b", alt: "image 2" },
{ src: "https://plus.unsplash.com/premium_photo-1691784778805-e1067ac42e01", alt: "image 3" },
{ src: "https://plus.unsplash.com/premium_photo-1682096467444-8861e1dc3bc2", alt: "image 4" },
{ src: "https://plus.unsplash.com/premium_photo-1682096252599-e8536cd97d2b", alt: "image 5" },
{ src: "https://plus.unsplash.com/premium_photo-1682096467444-8861e1dc3bc2", alt: "image 6" },
]3
Import the component in your project and use it
<div className="flex h-full w-full items-center pb-20 justify-center">
<ReflextGallery images={images} />
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| images | { src: string; alt: string }[] | - | The images to be displayed |
| images.src | string | - | The source of the image |
| images.alt | string | - | The alt of the image |