Below is a list of all the custom settings and features in the Divi Carousel Maker plugin. All settings are marked as either available in current version or planned and in progress for future versions.
Green Version Number = Already In Current Version
Red Version Number = Coming Soon In Future Updates
General Settings
Create a carousel from all the modules inside this column.
Number Of Columns 1.0
Set the number of carousel columns of modules to show at a time for each device size.
Number Of Rows 1.3
Set the number of carousel rows to show.
Carousel Spacing 1.0
Adjust the spacing around the carousel container.
Module Spacing 1.0
Adjust the spacing around each of the carousel modules.
Use Custom Module Width 1.0
Enable this setting to set a custom width for each of the carousel modules. Note that this setting overrides the number of modules shown per device and disables that setting. Also note that this setting will be disabled if the width of the module is too wide for the space or device size.
Module Width 1.0
Set the width for each of the carousel modules.
Cut Off Mode 1.0
Choose to allow the modules to be partially cut off on each side based on the width of the modules.
Module Vertical Alignment 1.0
Align all of the carousel modules vertically to the top, center, or bottom.
- Top
- Center
- Bottom
Scroll Settings
Set how many carousel modules scroll each time.
Starting Module Order 1.1
Choose an option to set how the carousel modules should start when the page loads.
- Default
- Random
- Specific Module
Specific Starting Module Number 1.1
Enter a number to set a specific module as the first one that shows when the page loads.
Scroll Animation Speed 1.0
Set the transition animation speed of the carousel scrolling effect in milliseconds.
Infinite Scroll 1.0
Set the carousel to keep scrolling in an infinite loop when it reaches either end.
Conditional Navigation Buttons 1.2
Choose to hide or adjust the opacity of the left or right navigation buttons conditionally based on whether the carousel reaches the start or end limit and cannot scroll any farther in that direction. This setting only applies when the Infinite Scroll setting is turned off and Navigation Buttons are turned on.
- Hide Buttons
- Change Opacity
Conditional Navigation Button Opacity 1.2
Adjust the opacity of the left or right conditional navigation buttons.
Auto Scroll 1.0
Make the carousel scroll automatically.
Auto Scroll Interval Timing 1.0
Set the interval timing duration of the carousel scrolling effect in milliseconds.
Auto Scroll Direction 1.0
Choose the direction of the carousel scrolling effect.
- Right-To-Left
- Left-To-Right
Continuous Smooth Auto Scroll 1.0
Choose to make the carousel scroll with a continuous smooth effect.
Smooth Scroll Speed 1.0
Set the speed of the continuous smooth scrolling effect in milliseconds.
Pause Auto Scroll On Hover 1.0
Pause the carousel scrolling on mouse hover.
Touch Swipe 1.1
Enable the ability to swipe the carousel modules with your finger on touch enabled devices.
Mouse Drag 1.1
Enable the ability to drag the carousel modules with your mouse.
Unrestricted Swipe & Drag 1.3
Allow touch swiping and mouse dragging to any slide regardless of the number of modules per scroll setting.
Keyboard Navigation 1.3
Enable the ability to navigate through the carousel using keyboard arrow keys.
Navigation Buttons Settings
Show Navigation Buttons 1.0
Choose to show or hide the carousel next and previous navigation buttons.
When Show Navigation Buttons is turned on, more settings appear below:
Navigation Buttons Type 1.2
Choose the type of buttons to use for the carousel navigation.
- Arrows Only
- Text Only
- Both Arrows & Text
Navigation Buttons Location 1.0
Choose the location for the carousel navigation buttons.
- Sides
- Sides Inset
- Top Left
- Top Center
- Top Right
- Bottom Left
- Bottom Center
- Bottom Right
Navigation Buttons Text Font Size 1.0
Set a font size for the navigation buttons arrows and text.
Navigation Button Background Color 1.0
Set a background color for the navigation buttons.
Navigation Arrow Color 1.0
Set a color for the next and previous navigation arrows.
Navigation Buttons Padding 1.0
Adjust the spacing around the inside of the navigation buttons.
Navigation Arrow Border Settings 1.0
Add and customize the border for the navigation buttons with all the standard border settings.
Navigation Button Box Shadow Settings 1.2
Add and customize the box shadow for the navigation buttons with all the standard box shadow settings.
Left Navigation Button Icon 1.1
Choose an icon for the left/previous navigation button.
Left Navigation Button Vertical Position 1.2
Set the vertical position of the left/previous navigation button.
Left Navigation Button Horizontal Position 1.2
Set the horizontal position of the left/previous navigation button.
Right Navigation Button Icon 1.1
Choose an icon for the right/next navigation button.
Right Navigation Button Vertical Position 1.2
Set the vertical position of the right/next navigation button.
Right Navigation Button Horizontal Position 1.2
Set the horizontal position of the right/next navigation button.
Navigation Controls Settings
Show Navigation Controls 1.0
Choose to show or hide the carousel navigation controls.
When Show Navigation Controls is turned on, more settings appear below:
Navigation Controls Type 1.2
Choose the type of controls to use for the carousel navigation.
- Dots
- Numbers
- Images
When Dots type is selected, the following settings appear below:
Align the navigation dots to the left, center, or right.
Navigation Dots Spacing 1.2
Adjust the horizontal space between the navigation dots.
Navigation Dots Color 1.0
Set a color for the navigation dots.
Navigation Dots Width 1.2
Set the width of the navigation dots.
Navigation Dots Height 1.2
Set the height of the navigation dots.
Navigation Dots Border Settings 1.2
Add and customize the border for the navigation dots with all the standard border settings like border radius, border width, border color, and border style.
Navigation Dots Box Shadow Settings 1.2
Add and customize the box shadow for the navigation dots with all the standard box shadow settings.
Active Navigation Dot Color 1.0
Set a color for the active navigation dot.
Active Navigation Dot Width 1.2
Set the width of the active navigation dot.
Active Navigation Dot Height 1.2
Set the height of the active navigation dot.
Active Navigation Dot Border Settings 1.2
Add and customize the border for the active navigation dot with all the standard border settings like border radius, border width, border color, and border style.
Active Navigation Dot Box Shadow Settings 1.2
Add and customize the box shadow for the active navigation dot with all the standard box shadow settings.
When Numbers type is selected, the following settings appear below:
Navigation Numbers Alignment 1.2
Align the navigation numbers to the left, center, or right.
Navigation Numbers Spacing 1.2
Adjust the horizontal space between the navigation numbers.
Navigation Numbers Font Settings 1.2
Customize and style the navigation numbers with all the standard font and text settings like font family, font weight, font style, font size, and line height.
Navigation Numbers Text Color 1.2
Set a text color for the navigation numbers.
Navigation Numbers Background Color 1.2
Set a background color for the navigation numbers.
Navigation Numbers Padding 1.2
Adjust the spacing around the inside of the navigation numbers.
Navigation Numbers Border Settings 1.2
Add and customize the border for the navigation numbers with all the standard border settings like border radius, border width, border color, and border style.
Navigation Numbers Box Shadow Settings 1.2
Add and customize the box shadow for the navigation numbers with all the standard box shadow settings.
Active Navigation Number Font Settings 1.2
Customize and style the active navigation number with all the standard font and text settings like font family, font weight, font style, font size, and line height.
Active Navigation Number Text Color 1.2
Set a text color for the active navigation number.
Active Navigation Number Background Color 1.2
Set a background color for the active navigation number.
Active Navigation Number Padding 1.2
Adjust the spacing around the inside of the active navigation number.
Active Navigation Number Border Settings 1.2
Add and customize the border for the active navigation number with all the standard border settings like border radius, border width, border color, and border style.
Active Navigation Number Box Shadow Settings 1.2
Add and customize the box shadow for the active navigation number with all the standard box shadow settings.
When Images type is selected, the following settings appear below:
Navigation Images 1.2
Choose which images you would like to use for the carousel navigation controls. Each image corresponds to one module within the carousel according to the order in which it is added or arranged.
Navigation Images Alignment 1.2
Align the navigation images to the left, center, or right.
Navigation Images Spacing 1.2
Adjust the horizontal space between the navigation images.
Navigation Images Width 1.2
Set the width of the navigation images.
Navigation Images Height 1.2
Set the height of the navigation images.
Navigation Images Border Settings 1.2
Add and customize the border for the navigation images with all the standard border settings like border radius, border width, border color, and border style.
Navigation Images Box Shadow Settings 1.2
Add and customize the box shadow for the navigation images with all the standard box shadow settings.
Active Navigation Image Width 1.2
Set the width of the active navigation image.
Active Navigation Image Height 1.2
Set the height of the active navigation image.
Active Navigation Image Border Settings 1.2
Add and customize the border for the active navigation image with all the standard border settings like border radius, border width, border color, and border style.
Active Navigation Image Box Shadow Settings 1.2
Add and customize the box shadow for the active navigation image with all the standard box shadow settings.
Highlight Settings
Choose to highlight the center module in the carousel.
Equalize Module Height 1.4
Enable this setting to make all the carousel slides equal height. This setting is related to the design settings.
Adjust the opacity of all non-highlighted carousel modules.
Non-Highlighted Module Blur 1.3
Adjust the blur of all non-highlighted carousel modules.
Non-Highlighted Module Size 1.3
Adjust the size of all non-highlighted carousel modules.
Non-Highlighted Module Box Shadow Settings 1.3
Add and customize the box shadow for the non-highlighted carousel modules with all the standard box shadow settings.
Non-Highlighted Module Opacity 1.0
Adjust the opacity of all non-highlighted carousel modules.
Non-Highlighted Module Blur 1.0
Adjust the blur of all non-highlighted carousel modules.
Non-Highlighted Module Size 1.0
Adjust the size of all non-highlighted carousel modules.
Non-Highlighted Module Box Shadow Settings 1.3
Add and customize the box shadow for the non-highlighted carousel modules with all the standard box shadow settings.
Hover Settings
Module Hover Effect 1.0
Choose an animation effect for when the mouse hovers over each of the carousel modules.
- None (default)
- Grow
- Shrink
- Bounce
- Pulse
- Bob
- Push Up
- Push Down
- Vertical Wobble
- Horizontal Wobble
- Fade
- Grayscale
Responsive Settings
Disable on 1.0
Choose to enable or disable the carousel per device.
- Phone
- Tablet
- Desktop
Most of the Divi Carousel Maker settings are responsive. These means that you can change the settings individually for Desktop, Tablet, and Phone devices. This is really incredible because it allows you to do things like control how many slides per device, enable or disable the navigation arrows per devive, move the positions of the arrows, and so much more.
The screenshots below demonstrate how many settings have the responsive features:
Miscellaneous Settings
Enable this setting if you are using Divi Image modules in the carousel and want to group them all together into one gallery lightbox slider. Any Image module can be clicked, and it will open a gallery just like how it works with the Divi Gallery module.
Portfolio Carousel Max Height 1.4
Set the maximum height of the carousel to solve a height bug that affects some browsers on the first page load when using Portfolio modules.
Scroll To Module ID 1.4
Enable the ability to scroll directly to a module within the carousel with a link to the module CSS ID.