Image Gallery
This Image Gallery component is an interactive image gallery designed. This component is ideal for use in a variety of projects, including e-commerce, portfolios, blogs, and more.
Make it with Workshop
Build your own component with AI
About this Component
This component functions as an interactive image gallery that displays a single main image and a horizontal list of thumbnail images below it. Users can select a main image by clicking on the desired thumbnail.
This component is designed to adapt to screen size.
On Desktop Screens : The component uses a custom scroll, which is activated by clicking and dragging (drag-to-scroll).
On Mobile Screens : The component switches to the native browser scroll.
Customizable Properties
You can adjust the component's appearance and behavior through the Framer properties panel:
images: The images for the gallery.
ListSize: The size (width and height) of each thumbnail.
ListRadius: The corner radius for the thumbnails.
gapMain: The vertical space between the main image and the thumbnail list.
gapList: The horizontal space between each thumbnail.
mainRadius: The corner radius for the main image.
aspectMode: The aspect ratio for the main image, with options like "1:1", "4:3", and "16:9".
scrollSpeed: The scroll speed when the user performs a drag-to-scroll on desktop.
