This guide will help you get familiar with the Divi Carousel Module by DiviGear. This all-in-one module can create different types of wonderful-looking carousels for Divi. Let’s explore the powerful features this module has to offer.
Before you start, ensure the Divi Carousel Module is installed and activated on your website. If you haven’t installed it yet, follow our step-by-step installation guide to get started.
Version Update: The Divi Carousel Module has recently been updated to version 3.0. Make sure your plugin is up to date to access the latest features and improvements.
After successfully installing the plugin, you will find a new “Divi Carousel” module in your Divi module list. Simply add this module anywhere on your website to create stunning and fully customizable carousels.
Once you add the module to a page, you’ll see three familiar Divi tabs:
- Content Tab
- Design Tab
- Advanced Tab
In the Content Tab, you’ll find an option to add a new item. Each item you add becomes a separate carousel slide and comes with its own set of three tabs—Content, Design, and Advanced.
- Item-Level Settings: Customizations within an item apply only to that specific slide.
- Parent-Level Settings: Adjustments made at the module level affect the entire carousel and all items inside it.
This structure gives you complete control over individual slides while maintaining consistency across the carousel.
Content
Add a new slider and set the carousel functions using simple toggles and input fields.
Add New Item
The first setting you’ll see after adding the Divi Carousel module is “Add New Item.” Click this option to create individual carousel items with a range of customization settings.
To explore all available customization options inside the “Add New Item” settings, click here.
Slider Settings
Set the slider from the list settings according to your needs.
- Item Width Control – Set a fixed width for carousel items across different devices.
- Show Items on Desktop, Tablet, and Mobile – Define how many items to display on each device. (This option is hidden if “Item Width Control” is enabled.)
- Multislide – Enable this to slide multiple items simultaneously.
- Use Multiple Rows – Display carousel items in multiple rows instead of a single row. (Enabling this option will hide the “Multislide” setting.)
- Row Per Slide – Define the number of rows for the carousel.
- Transition Duration (ms) – Adjust slide transition speed.
- Center Slider – Start slides from the middle.
- Loop – Enable continuous looping of slides.
- Autoplay – Automatically play the carousel with these sub-options:
- Pause on Hover – Stops autoplay when hovered over.
- Scroller Effect – Enables continuous scrolling instead of slide transitions.
- Autoplay Delay – Set the interval between slide transitions.
- Autoplay Only on Viewport – Autoplay starts only when the carousel is visible.
- Arrow Navigation – Show navigation arrows on the carousel.
- Dot Navigation – Enable dot navigation and adjust dot alignment.
- Large Active Dot – Make the active dot larger.
- Item Spacing – Adjust the spacing between carousel items.
- Equal Height Items – Ensure all carousel items containers have the same height.
- Vertical Align – Choose from three vertical alignment options. (Not available if “Equal Height Items” is enabled.)
- RTL (Right to Left) – Enable right-to-left text direction for languages like Arabic and Hebrew. (Not available if “Multi-Row” or “Lazy Loading” is enabled.)
- Lazy Loading – Load carousel images only when they come into view for better performance. (Option to preload images before transition for smoother display.)
- Hash Navigation – Assign unique URLs to each carousel item for direct linking.
- Keyboard Control – Navigate the carousel using the keyboard arrow keys.
- Mouse Wheel Control – Scroll through the carousel using the mouse wheel.
- Disable Mouse Drag on Desktop – Prevent users from dragging the carousel with a mouse on desktop devices. Do the same for mobile or tablet by enabling the next toggle.
Advanced Slider Settings
Choose from two slider effects:
- Default – Standard slide transition.
- Coverflow – A 3D effect that creates depth and perspective.
- Rotate – Adjust the angle of coverflow items.
- Coverflow Shadow – Add shadow effects for a more realistic 3D look.
Background
Customize the background of the carousel using colors, images, gradients, or videos.
Admin Label
Assign a custom name to the module for better organization.
Design
Overlay
Turn on to add an overlay over the image. Here are the sub-settings that come with it-
- Overlay on Hover – Turn this off to set a fixed overlay over the image.
- Overlay Icon Color – Adjust the icon color on the overlay.
- Icon Size – Customize icon size.
- Overlay Color – Set the overlay color.
- Use Custom Overlay Icon – Toggle to select a custom icon.
- Use Animated Overlay Icon – Enable animated icons for lightbox or video.
- Animated Icon Effect – Choose from 2 animation effects.
- Animated Icon Color – Set icon color for animation.
- Animated Icon Ripple Color – Set ripple effect color.
- Animated Icon Background Color – Customize icon background color.
- Animated Icon Border Width – Adjust icon border width.
- Animated Icon Border Color – Set the border color for the icon.
Image
Customize image alignment, and maximum width, and enable “Force Full Width.”
Image Border
Customize border width, style, and color for carousel item images.
Image Box Shadow
Add shadow effects around carousel item images.
Title Text
Customize title text with background color, font, style, and alignment.
Subtitle Text
Customize subtitle text with background color, font, style, and alignment.
Body Text
Customize body text with background color, font, style, and alignment.
Next & Previous Button
Customize the navigation buttons-
- Position: Choose from 4 positioning options.
- Show on Hover: Toggle to display navigation on hover (only for middle position).
- Alignment for Top & Bottom Position: Choose from 4 alignment options.
- Use Previous Custom Icon: Toggle to select a custom icon for the “Previous” button.
- Use Next Custom Icon: Toggle to select a custom icon for the “Next” button.
- Font Size, Spacing Around, Line Height: Adjust typography and spacing for navigation buttons.
Color Settings
Customize the color of the navigation icon and dots.
Active Slide
Toggle to add a background or gradient to the active slide.
Inactive Slide
Toggle on to activate styling for inactive slides.
- Background Color – Set a background or gradient to the inactive slides.
- Enable Blur Effect – Toggle on set the blur value to make the slider blur.
- Disable Click – Disallow click on inactive slides.
- Enable Scaling – Toggle on set the scale value to make inactive slides small.
Container Style
Fade out the carousel container from left and right with two color options and control for the middle space.
Z-index
Control stacking order of elements (image container and content container).
Custom Spacing
- Container: Adjust padding and margins for the carousel element container.
- Content: Modify padding and margins for individual carousel contents.
Item Border
Customize border style for carousel items.
Sizing
Adjust the width, height, and alignment of the entire carousel module.
Spacing
Add custom margins and padding to the entire carousel module.
Transform
Apply transformations (rotation, scaling, etc.) to the entire carousel module.
Advanced
The Advanced tab allows you to add custom CSS, adjust visibility settings for different screen sizes, and manage other advanced options to fine-tune the functionality and appearance of the carousel module.
Carousel Item Settings
Adding a new item or editing an existing item will land you here. Any changes here will apply to that particular item only.
Content
Main Content
Add content for the carousel item.
- Title – Add a title
- Subtitle – Add A Subtitle
- Content – Add content here. It’s an HTML-supported field.
- Content Limit – Toggle on to enable content limit settings. Set the limit length and change the text. The style for this will be your website link style.
Title & Image Link
Add links to the title and image of the carousel item.
Button Settings
Add Button Text, URL, and Button link open option.
Image Settings
- Use Icon – Use an Icon instead of an image
- Image – Select or upload and time and change the image alt text.
- Open as Image Lightbox – Turn on to open the image in a lightbox.
- Show caption – Enable image caption in the lightbox
- Open as Video Lightbox – Toggle on to enable video lightbox.
- Video Popup URL– Use the embed URL to open the video in the lightbox. Example – https://www.youtube.com/embed/b-LM4Pd7eB4
- Video Link Target – set the video target to open in a popup or a new tab.
Meta
Add either social media or ratings to the carousel item.
Link
Assign a URL to the entire carousel item.
Background
Set a background color, gradient, or image for the carousel item.
Admin Label
Change the Item label by default to its title.
Design
Image Style
Place the image in 5 different positions. For left and right control the image width and top placement option for tablet and mobile.
Image Filter
Dedicated filter for images.
Title Style
Customize the title text style with all typography including a positioning option.
Subtitle Style
Customize the subtitle text style with all typography including a positioning option.
Content Style
Customize the title text style with all typography options.
Button
Adjust button alignment and style.
Social Media Style
Customize the appearance of social media icons. Change color, alignment, position, size, and add border, shadow, etc.
Rating Style
Adjust the style of rating icons. Change color, alignment, position, size, etc.
Spacing
Adjust margins and padding for carousel items.
Item Border
Customize the item border.
Box Shadow
Add shadow effects.
Filters
Apply color filters to the carousel item.
Transform
Apply transformations (rotation, scaling, etc.) to carousel items.
Advanced
The Advanced tab allows you to add custom CSS, set visibility conditions, and manage other advanced settings to refine the carousel module’s functionality and appearance.
Final Thoughts
The Divi Carousel Module is an incredibly powerful and flexible tool to elevate your Divi website. With extensive customization options, you can create stunning, engaging carousels in just a few clicks.
Need help? We’ve got you covered! 💬 Questions or feedback? Drop a comment on this documentation. 🗨️ Need quick assistance? Click the chat icon to reach our support team. 📩 Still stuck? Submit a support request via the “Still stuck?” form.
