Image Strip Expander

An interactive image strip component

Preview component: Here About The Expandable Image Strip is a versatile component that creates an elegant, interactive image gallery experience. It displays multiple images in a condensed strip layout, with smooth animations that expand cards when users interact with them. Key Features Flexible Interaction Modes - Choose between hover (desktop), click (all devices), or static display to match your design needs Smart Proximity Scaling - Cards adjacent to the active card automatically adjust their width for a natural, flowing appearance Customizable Image Rendering - Control how much of each image is visible when expanded, from 10% to 100% of the component width Responsive Design - Automatically adapts to touch devices, ensuring optimal interaction on mobile and tablet Visual Customization - Full control over border radius, card spacing, borders, shadows, and inactive card dimming Smooth Animations - Built-in transition controls with optimized performance for silky-smooth expansions Accessibility Ready - Includes proper ARIA labels and keyboard navigation support Perfect Use Cases Portfolio galleries showcasing multiple projects Product image carousels for e-commerce Before/after comparisons Team member showcases Feature highlights Image-based navigation menus The component intelligently handles layout calculations, ensuring images remain centered and properly scaled regardless of the number of cards or container size. The proximity effect creates a natural visual hierarchy, drawing attention to the active card while keeping neighboring cards visible and accessible. Simply add your images, customize the interaction mode and visual styling, and you’re ready to create an engaging gallery experience that works beautifully across all devices. How to Use Adding Images: - Click the “Images” property in the control panel - Add images using the “+” button - Each image can be uploaded or linked from a URL Reorder images by dragging them in the array Interaction Settings: - Choose “Hover” for desktop hover expansion (auto-switches to click on mobile) Choose “Click” for click/tap expansion on all devices Choose “None” for a static display without interaction customizing the expansion Use “Image Render Width” to control how much of the image shows when expanded (10-100%) Adjust “Proximity Effect” to make cards near the active card appear wider (0-5) Set “Default Expanded Index” to have a card pre-expanded on load (0 = none, 1 = first image, etc.) Visual Styling: - Adjust “Border Radius” for rounded corners on cards Set “Card Gap” to control spacing between cards Add borders using the “Border” control Apply shadows to active cards with “Active Shadow” Dimming Effect: - Enable “Inactive Dimming” to darken non-active cards Customize the “Overlay Color” for the dimming effect Animation Use the “Transition” control to customize expansion speed and easing Tips The component automatically adapts to touch devices Images are centered and cropped to fit the card height On mobile, interaction automatically switches to click/tap regardless of mode setting

An interactive image strip component