Popular Search licenselicense keyjsonacfcarousel
View Categories

Carousel Module 5.0 Overview

8 min read

Divi Carousel Module lets you create different types of carousels like logo, testimonial, image, content, team, or video sliders. It includes advanced customization options for full design control.

Version Update: The Divi Carousel Module has been updated to version 5.0.0 for full compatibility with Divi 5. Make sure your plugin is up to date to access the latest features and improvements.

Let’s see the settings in brief and how to make better use of it —

Content Tab

Use this tab to add and configure carousel items and core functionality.

Add New Item

By default, the carousel comes with 4 sample slides. You can edit or delete them. And to add a new slide, click + Add New Item. This will open the individual slide settings where you can add content, image and more. To learn more about adding and customizing slides individually, click here.

Slider Settings

  • Item Width Control: Enable this to set a fixed width for every carousel item.
    • Item Width: Set the width of each individual item.
  • Show Item Desktop/ Tablet/ Mobile: Define how many items appear at once on each device. (Only available when item width control is disabled.)
  • Multislide: Show multiple items within a single slide view.
  • Use Multiple Row: Display carousel items in multiple rows instead of a single row. (Only works with default slide effect)
    • Row Per Slide: Set how many rows appear in each slide. 
  • Transition Duration (Ms): Set the time (in milliseconds) for slide transition animation.
  • Center Slide: Keep the active slide centered in the carousel at all times.
  • Loop: Run the slider continuously from last item back to first.
  • Autoplay: Move slides automatically without interaction.
    • Pause On Hover: Pause autoplay when hovering and resume when mouse leaves.
    • Scroller Effect: Create a smooth continuous scrolling motion instead of step-by-step sliding.
      • Transition Duration For Scroll Effect: Set the speed of continuous scrolling motion.
    • Auto Play Delay: Set time delay between autoplay transitions.
    • Autoplay Only On Viewport: Start autoplay only when the slider is visible on screen.
  • Arrow Navigation: Add previous and next arrows buttons for navigation.
  • Dot Navigation: Use clickable dots to navigate between slides.
    • Dots Alignment: Set dot position (left, center, right).
    • Large Active Dot: Highlight the active dot with a larger size.
  • Item Spacing: Set the gap between carousel items.
  • Equal Height Item: Keep all items at equal height.
  • Vertical Align: Control how content inside each slide is positioned vertically.  (Only available when equal height item is disabled.)
  • RTL: Reverse the slide direction for right-to-left languages like Arabic or Hebrew.
  • Lazy Loading: Delay image loading until a slide is about to come into view.
    • Start Loading Before Transition Start: Preload the next slide just before the transition begins.
  • Hash Navigation: Allow specific slides to be linked directly via URL hash. (Useful for linking directly to a specific slide)
  • Keyboard Control: Navigate between slides using keyboard arrow buttons.
  • Mouse Wheel Control: Navigate between slides using the mouse wheel.
  • Disable Mouse Drag Events On Desktop: Disable dragging slides with mouse on desktop.
    • Disable Touch Events ON Mobile/Tablet: Disable swipe gestures on mobile and tablet.

Advanced Slider Settings

  • Slide Effect: Choose slide transition style (default or coverflow). If you choose coverflow, these settings will appear:
    • Rotate: Add rotation effect during transition.
    • Coverflow Shadow: Control shadow style in coverflow layout.

Background: Add a background color, gradient, image, video, pattern, or mask to the module.

Element Label: Rename the module to organize it more easily in the Divi Builder. (Only you can see this label.)

Design Tab

Use this tab to style and customize the visual appearance of the carousel.

Overlay

  • Image Overlay: Add an overlay layer on top of the image.
  • Overlay On Hover: Show the overlay only when hovering over the item.
  • Overlay Icon Color: Set the color of the overlay icon.
  • Icon Size: Set the size of the overlay icon.
  • Background: Set the overlay background color or gradient.
  • Use Custom Overlay Icon: Use a custom icon instead of the default one.
  • Use Animation Overlay Icon: Apply animation to the overlay icon.
    • Animated Icon Effect: Choose the animation style for the icon.
    • Animated Icon Color: Set the color of the animated icon.
    • Animated Icon Border Width: Set the border thickness of the animated icon.
    • Animated Icon Border Color: Set the border color of the animated icon.
    • Background: Set the background style for the overlay area.

Image

  • Image Alignment: Set image position inside the item (left, center, or right).
  • Force Full Width: Make the image stretch to the full width of the container.
  • Image Max Width: Set the maximum width allowed for the image.

Image Border: Set border style, width, and color around the image.

Image Box Shadow: Add shadow effect to the image for depth.

Title Text: Customize the main heading text with typography options.

Subtitle Text: Customize the subtitle text with typography options.

Body Text: Customize the body text with typography options.

Next & Previous Button

  • Position: Set where the navigation buttons appear in the slider.
  • Show On Hover (Only For Middle Position): Display arrow buttons only when hovering over the slider.
  • Alignment For Top & Bottom Position: Set button alignment when placed at top or bottom (left, center, or right).
  • Use Previous Custom Icon: Replace the default previous icon with a custom one.
  • Use Next Custom Icon: Replace the default next icon with a custom one.
  • Font Size: Set the size of the navigation icon.
  • Space Around: Control spacing around the navigation buttons.
  • Line Height: Set vertical spacing for the icon inside the button.

Color Settings

  • Arrow Color: Set the color of the navigation arrows.
  • Arrow Background Color: Set the background color behind the arrows.
  • Dots Color: Set the color of inactive navigation dots.
  • Dots Active Color: Set the color of the active (current) navigation dot.

Active Slide: Enable this to add background color or gradient to the active slide.

Inactive Slide

  • Background: Set background color or gradient for inactive slides.
  • Enable Blur Effect: Apply a blur effect to inactive slides.
    • Blur Effect: Control the blur intensity.
  • Disable Click: Prevent clicks on inactive slides.
  • Enable Scaling: Apply a scaling effect to inactive slides.
    • Item Scaling Range: Set how much inactive slides scale up or down.

Container Style

  • Enable Fade Effect: Add a fading effect to the edges of the container.
    • Primary Color: Set the main color used in the container style.
    • Secondary Color: Set the secondary color used for blending or gradient effect.
    • Fade Spacing In Middle: Control the spacing where the fade effect appears.

Z-Index

  • Image Container: Set the stacking order of the image container (controls what appears on top or behind).
  • Content Container: Set the stacking order of the content container relative to other elements.

Custom Spacing

Set custom spacing between carousel items and their internal elements.

  • Container: Adjust margin and padding for the carousel container, inner wrapper, and individual items.
  • Content: Adjust margin and padding for image, title, subtitle, and other content elements inside each carousel item.

Item Border: Set border style, width, and color for each carousel item.

Sizing: Adjust the width, height, and alignment of the module.

Spacing: Add custom margin and padding to the module’s container.

Transform: Scale, rotate, move, or skew the module.

Advanced Tab

This tab provides additional settings for advanced users who want greater control over the module with custom code, conditions, and more.

You can customize each carousel item separately. These settings will override the main module settings.

Content Tab

Main Content

  • Title: Set the main title for the carousel item.
  • Subtitle: Set the subtitle for the carousel item.
  • Content: Add the main content text for the item.
  • Content Limit: Set a limit for how much content is shown initially.
    • Set Content Length: Define the number of characters or words to display before truncation.
    • Read More: Set the text for expanding hidden content.
    • Show Less: Set the text for collapsing expanded content.

Title & Image Link

  • URL: Add a link for the title and image of the carousel item.
  • URL Opens: Choose how the link opens (same tab or new tab).

Button Settings

  • Button Text: Set the label shown on the button.
  • Button URL: Add the link the button should open.
  • Button New Tab: Choose whether the button link opens in a new tab or the same tab.

Image Settings

  • Use Icon: Choose whether to display an icon instead of an image.
    • Icon: Select the icon to display when icon mode is enabled.
  • Image: Upload or select the image for the carousel item.
  • Image Alt Text: Add alternative text for the image for accessibility and SEO.
  • Opens As Image Lightbox: Open the image in a lightbox when clicked.
    • Show Caption: Display image caption if available.
  • Opens As Video Lightbox: Open a video popup instead of an image when clicked.
    • Video Popup URL: Add the video link for the lightbox popup.
    • Video Link Target: Choose how the video link opens (same tab or new tab).

Meta

  • Social Media: Enable this to show the following profile
    • Facebook Url
    • Twitter Url
    • Linkedin Url
    • Instagram Url
    • Email Address
    • Open Social Media Url: Choose how the links open (same tab or new tab).
  • Use Rating: Enable rating display for the carousel item.
    • Rating: Set the rating value for the item.

Link: Add a URL to make the item clickable.

Background: Set the background style for the carousel item (color, gradient, or image).

Element Label: Add a label to identify the item inside the builder for easier editing.

Design Tab

Image Style: Set image position from 5 different options.

Image Filter: Apply visual filters to the image (brightness, contrast, blur, etc.).

Title Style: Style the title with typography options. You can also set the title position as well.

Subtitle Style: Style the subtitle text with typography options.

Content Style: Style the main content text with typography options.

Button

  • Button Alignment: Set the button alignment from left, right and center

There you will also find customization options like background, border, text, icon, spacing and more.

Social Media Style

  • Alignment: Set the alignment of social media icons inside the item.
  • Position: Set where the social icons appear within the layout.
  • Icon Size: Control the size of the social media icons.
  • Color and Background: Set icon color and background styling for social media icons.

There you will also find border style options.

Rating Style

  • Alignment: Set the alignment of the rating display.
  • Position: Set where the rating appears within the item layout.
  • Rating Icon Size: Control the size of the rating icons (stars or symbols).
  • Rating Color: Set the color of the filled rating icons.
  • Blank Color: Set the color of the empty or unfilled rating icons.

Spacing: Set margin and padding for the element.

Item Border: Set border style, width, and color for the item.

Box Shadow: Add shadow effect to the item for depth.

Filter: Apply visual effects like brightness, contrast, blur, or saturation.

Transform: Scale, rotate, move, or skew the item for layout styling.

Advanced Tab

Use this tab to apply custom CSS, conditions, transitions, and scroll effects to individual items.

Need Help?

If you have any questions or need assistance, contact our support team: [email protected]

What are your Feelings

Submit a Comment

Your email address will not be published. Required fields are marked *