Image Carousel Widget

Table of Contents

Share This Post

✨ What It Is

A dynamic slider designed specifically for displaying a series of images in a visually engaging, scrollable format. It supports various layouts, navigation settings, and advanced styling for polished image galleries.


➕ Adding the Widget

  • Simply drag the Image Carousel widget into a section or column.

  • Select multiple images from your media library to include in the carousel.


📋 Content Settings

  • Image Selection & Captions: Choose which images to display, and optionally show captions derived from titles, descriptions, or leave blank.

  • Image Resolution: Control size using preset (thumbnail, medium, full) or custom dimensions.

  • Slides Settings:

    • Slides to Show: Set how many images appear simultaneously (1–10).

    • Slides to Scroll: Determine how many advance per swipe or click.

    • Image Stretch: Option to fill the slide area completely or maintain natural proportions.

  • Navigation: Choose to show arrows, dots, both, or none. Customize arrow designs and styles.

  • Link Options: Link each image to its media file (with lightbox option) or to custom URLs, with control over opening behavior and attributes.

  • Lazy Load: Enable to delay image loading until they come into view for better performance.

  • Autoplay & Loop: Toggle automatic slide transitions, set speed, and enable continuous looping.

  • Pause Controls: Options to pause autoplay on hover or interaction.


🎨 Style Tab

  • Spacing & Alignment: Set vertical alignment (top, middle, bottom) and adjust spacing between slides.

  • Border & Radius: Define border style, width, and corner rounding.

  • Padding: Control internal slide spacing.

  • Arrows & Dots: Customize position, size, color (normal and active), and placement (inside/outside).

  • Caption Styling: Adjust text color, typography, alignment, and spacing from images.


⚙️ Advanced Tab

Includes standard advanced controls such as margin/padding, z-index, responsive visibility, motion effects, custom CSS, positioning, and HTML attributes.


💡 Common Use Cases

  • Team member galleries with names and links.

  • Portfolios and visual showcases for artists or designers.

  • Product feature sliders or testimonial images.

  • Embedded galleries with autoplay and lightbox engagement.


✅ Best Practices

  • Maintain consistent image dimensions for a polished appearance.

  • Use lazy loading to improve initial load times.

  • Customize autoplay speed and hover pause for optimal UX.

  • Style navigation elements to match your design theme.

  • Add meaningful captions for accessibility and context.


The Image Carousel widget offers robust, customizable image display options, combining performance and elegant design with interactive controls. Let us know if you’d like help customizing a carousel or working with lightbox effects!

Subscribe To Our Newsletter

Get updates and learn from the best

More To Explore

Icons vs. Text in UI/UX: Finding the Sweet Spot in Digital Communication

Typography & Design Systems: Building the Invisible Architecture of Clarity and Trust

The Complete Guide to Choosing the Perfect Color Scheme for Your Website

Words in Motion: Why Animated Typography Rules the Digital Age

The Complete Blueprint to Building a Powerful Brand Identity

Wireframing Unlocked: The Secret Architecture Behind Seamless Digital Products

Our Web Experts are ready — we just need a few more details

Let's Start Today - Super low prices - Get your Custom designed and Feature rich website