Image Gallery: Premium Interactions Component by Edi Priatama

Marketplace Components Categories Interactions

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.

About this Component

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.