An interactive image gallery with a large main view and thumbnails below. Features smooth drag/swipe navigation, animated thumbnail expansion, and responsive controls. Perfect for showcasing products, portfolios, or any image collection.

Main Gallery

Main Height 100-800 pixels

Height of the main image display area. Taller heights showcase images in more detail. Adjust based on your image aspect ratios.

Default: 400

Main Border Radius 0-50 pixels

Rounded corners for the main image container. Higher values create more rounded corners for a softer look.

Default: 8

Images JSON array

Array of image objects with url and title properties. Add your gallery images here in JSON format.

Required

Navigation

Show Navigation Buttons on/off

Display previous and next arrow buttons on the main gallery. Turn off if you prefer swipe-only navigation.

Default: On

Button Color color picker

Background color for the navigation buttons. Choose a color that contrasts well with your images.

Default: White

Button Size 30-80 pixels

Size of the circular navigation buttons. Larger buttons are easier to tap on mobile devices.

Default: 40

Thumbnails

Thumbnail Height 50-150 pixels

Height of the thumbnail strip below the main image. Taller thumbnails show more image detail but take more space.

Default: 80

Thumbnail Gap 0-20 pixels

Space between thumbnail images. Smaller gaps create a denser look, larger gaps add breathing room.

Default: 2

Thumbnail Border Radius 0-30 pixels

Rounded corners for thumbnail images. Match this with your main border radius for consistency.

Default: 8

Expand Duration 0.1-1.0 seconds

Animation speed when the active thumbnail expands to 2x size. Lower is faster, higher is more dramatic.

Default: 0.3

Interaction

Drag Threshold 10-50 percent

Percentage of screen width you need to drag before switching images. Lower values make it easier to swipe, higher values prevent accidental swipes.

Default: 30

Velocity Threshold 200-1000

Speed needed for a quick swipe to advance images. Lower makes it easier to flick through images quickly.

Default: 500

Performance

This element is lightweight and efficient. Uses CSS transforms for smooth animations and only updates when needed. Works great on mobile with touch gestures. The active thumbnail expands to 2x width while others maintain equal sizing.