Image Gallery

interactive image gallery that displays a single main image and a horizontal list of thumbnail images below it.

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.

interactive image gallery