Divi Image Carousel

The Divi Image Carousel module, part of the Divi Carousel PRO plugin, formerly known as Wow Carousel Pro, allows you to display multiple images in a smooth, interactive sliding carousel. It’s perfect for showcasing galleries, portfolios, product images, or visual highlights in an engaging and responsive format within Divi.

Content

The Content tab is where you manage the images that appear in the carousel. It allows you to add new image items and configure each image’s content, images, and associated text for maximum flexibility and branding control.

Add New Item

Use this option to add an individual image to the carousel. Each image item can be configured separately with its own image, alt text, and branding information.

Content

This tab contains all settings related to the specific image item you are adding or editing.

Carousel Item → Content

The Content toggle allows you to define the main visual and textual elements for an image.

  1. Upload Image – Upload the main image to be displayed in the carousel.
  2. Image Alt Text – Add alternative text for accessibility and SEO purposes.
  3. Title – Enter the title text to display on or with the image.
  4. Subtitle – Enter a secondary line of text to provide additional context or description.

Carousel Item →Tab Content

This toggle is used when tab navigation is enabled in the carousel. Fields under this toggle only appear if the Use Tab option is enabled in the Tab Settings.

  1. Title – Set the text for the tab’s title.
  2. Subtitle – Add a secondary line of text to the tab.
  3. Thumbnail – Enable a thumbnail image for the tab.
  4. Add Image – Upload an image to be used as the tab’s thumbnail.

Carousel Settings

This toggle controls the global behavior and interaction of the carousel.

Carousel Settings → General Tab

These options define animation, layout, and responsiveness.

  1. Animation Speed – Controls slide transition speed.
  2. Autoplay – Automatically rotates team member slides.
  3. Autoplay Speed – Sets the delay between autoplay transitions.
  4. Navigation & Pagination – Displays navigation arrows, pagination dots, both, or none.
  5. Use Fixed Width Slide – Maintains consistent slide width.
  6. Slides To Show – Determines the number of visible items per device.
  7. Slide Spacing – Adjusts spacing between items.
  8. Apply Spacing on First & Last Items – Adds spacing to edge slides.
  9. Infinite Looping – Enables continuous looping.

Carousel Settings → Advanced Tab

These options provide advanced control over interaction and performance.

  1. Sliding Direction – Controls slide direction, including RTL compatibility.
  2. Sliding CSS Transition – Defines the easing effect for animations.
  3. Lazy Loading – Loads content only when required.
  4. Lazy Loading Type – Choose between Progressive or On-demand loading.
  5. Auto Height – Adjusts carousel height automatically.
  6. Swipe – Enables touch swipe navigation.
  7. Pause on Hover – Pauses autoplay on hover.
  8. Items to Scroll – Sets how many items move per scroll.
  9. Vertical Mode – Displays slides vertically.
  10. Center Mode – Highlights the center item.
  11. Wait For Animate – Prevents overlapping animations.
  12. Use Custom Cursor – Enables a custom cursor effect.
  13. Wrapper Spacing Top – Adds spacing above the carousel.
  14. Wrapper Spacing Bottom – Adds spacing below the carousel.
  15. Open Image in Lightbox – Opens images in a lightbox view.

Tab Settings

This toggle enables and manages tab-based navigation.

  1. Use Tab – Enables the tab layout.
  2. Hide Tab on Mobile – Hides tabs on smaller devices.
  3. Select Tab Elements – Choose which elements appear in tabs.
  4. Tab Items – Manage individual tab entries.
  5. Item Spacing – Controls spacing between tab items.

Design

The main Design tab provides global styling options for the entire image carousel. Here, you can control the visual appearance of every element in the carousel, ensuring that images, titles, and captions match your website’s overall aesthetic while maintaining a polished and professional presentation.

Navigation

This toggle allows you to style the carousel’s navigation arrows. You can adjust their size, color, spacing, and hover effects to create smooth and intuitive navigation between images.

Pagination

Customize the pagination dots that indicate the position of each image in the carousel. You can style active and inactive states, adjust spacing, and change colors to ensure clear visual feedback for users.

Tab Style

When using tab-based navigation, this toggle controls the design of the tab container. You can modify background colors, borders, spacing, and hover effects to create an attractive and cohesive tab interface.

Tab Elements

This toggle allows you to style the individual elements inside tabs, including the title, subtitle, and thumbnail. Typography, spacing, and alignment can all be customized to maintain a consistent and visually appealing design.

Text

Control typography for all textual elements in the carousel, such as titles, subtitles, or captions. You can adjust font size, weight, style, line height, letter spacing, and color to match your site’s style.

Sizing

This toggle controls the width and height of carousel elements, including images, captions, and tab items. It ensures proper scaling across devices and maintains a consistent, well-structured layout.

Spacing

Adjust the margins and padding between images, carousel items, and tab content. Proper spacing ensures clarity, balance, and a visually pleasing presentation across the entire carousel.

Did this answer your question?