Image Gallery

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.