Divi Carousel Maker

Documentation & Support

Still Need Help?

If you have a question not covered here in the docs, or if you face any technical issue, you can reach out to us.

Visit Our Support Page

Divi Carousel Maker Plugin by Pee Aye Creative

Ready To Purchase?

Visit the product page to get all the details and make your purchase.

View Product

five star rating_1

Are You Enjoying Divi Carousel Maker?

If you are enjoying the Divi Carousel Maker plugin, we would really appreciate it if you could share a public review! ❤️

It is such a blessing to hear your feedback, and reviews help other Divi users make informed decisions about the value of our products.

Leave A Review

Settings and Featues List Divi Carousel Maker Plugin by Pee Aye Creative

Settings List

An overview of all available settings and features within the plugin with helpful descriptions on how to use them.

When you open the Carousel tab in the Divi Builder columns, you will see all the settings which have a label and a descriptive help text. For your convenience, we have listed all the custom settings in the Carousel tab below for quick reference. 

This unique settings list also works as a roadmap and a changelog! Be sure to check the version numbers next to each setting. Items with a green number are already available, and items with a pink number are new features in development or planned and coming soon! As we begin working on new features, we always update the settings list, so be sure to check back often to see what is planned.

Green Version Number = Already In Current Version
Red Version Number = Coming Soon In Future Updates

General Settings

Make This Column A Carousel 1.0 Create a carousel from all the modules inside this column. Number Of Slides Per Device 1.0 Set the number of slides to show at a time for each device size.
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
Number Of Rows (Advanced) 1.3 Set the number of carousel rows to show. This is only needed when creating an advanced carousel with multiple modules.
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
Carousel Container Spacing 1.0 Adjust the spacing around the outside of the carousel container. Use Custom Slide Width 1.0 Enable this setting to set a custom width for each of the carousel slides. Note that this setting overrides the number of slides shown per device setting. Also note that this setting will be disabled if the width of the slide is too wide for the space or device size. Slide Width 1.0 Set the width for each of the carousel slides. Cut Off Mode 1.0 Choose to allow the slides to be partially cut off on each side based on the slide width. Vertical Alignment 1.0 Align all of the carousel slides vertically to the top, center, or bottom.
  • Top
  • Center
  • Bottom
Use Adaptive Height 2.1.9 Choose to make the height of each slide change according to the height of the slide content.

Scroll Settings

Number Of Slides Per Scroll 1.0
Set how many carousel slides scroll each time.

Starting Slide Order 1.1
Choose an option to set how the carousel slides should start when the page loads.

  • Default
  • Random
  • Specific Module

Specific Starting Slide Number 1.1
Enter a number to set a specific slide 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.

Pause Auto Scroll If Video Slide Playing 2.1
Pause the carousel auto scroll behavior if a video module is clicked and the video is playing in the carousel. 

Touch Swipe 1.1
Enable the ability to swipe the carousel slides with your finger on touch enabled devices.

Mouse Drag 1.1
Enable the ability to drag the carousel slides with your mouse.

Unrestricted Swipe & Drag 1.3
Allow touch swiping and mouse dragging to any slide regardless of the number of sliders per scroll setting.

Keyboard Navigation 1.3
Enable the ability to navigate through the carousel using keyboard arrow keys.

Scroll Transition Effect 2.0
Choose the type of scroll transition effect for the carousel.

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:

Navigation Dots Alignment 1.0 Align the navigation dots to the left, center, or right. Navigation Dots Spacing 1.2 Adjust the horizontal space between the navigation dots. Navigation Controls Animation Speed (ms) 2.1.7 Set the transition animation speed of the carousel navigation controls in milliseconds.

Navigation Dots Opacity 2.1
Adjust the opacity of the default navigation control 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 Opacity 2.1
Adjust the opacity of the active navigation control dot.

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 Opacity 2.1
Adjust the opacity of the default navigation control 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 Opacity 2.1
Adjust the opacity of the active navigation control number.

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. Make Thumbnail Controls Fullwidth 1.2 Choose to set the carousel navigation control thumbnails to equally fill the width of the available space.

Navigation Images Opacity 2.1
Adjust the opacity of the default navigation control 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 Opacity 2.1
Adjust the opacity of the active navigation control image.

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.

Slide Counter Settings

Show Slide Counter 2.1
Choose to show the current slide number and the total number of slides as a fractional slide counter.

Slide Counter Alignment 2.1
Align the slide counter to the left, center, or right.

Slide Counter Margin 2.1
Adjust the spacing around the outside of the slide counter.

Slide Counter Separator Color 2.1
Set the color for the slide counter separator.

Slide Counter Separator Size 2.1
Increase or decrease the size of the slide counter separator.

Slide Counter Font Settings 2.1
Customize and style the slide counter number with all the standard font and text settings like font family, font weight, font style, font size, and line height.

Slide Counter Text Color 2.1
Set a text color for the slide counter number.

Total Slides Font Settings 2.1
Customize and style the total slides number with all the standard font and text settings like font family, font weight, font style, font size, and line height.

Total Slides Text Color 2.1
Set a text color for the total slides number.

Design Settings

Highlighted Slide 2.0
Choose which slide in the carousel should be highlighted.

  • None
  • Left
  • Center
  • Right

Equalize Slide Height 2.0
Enable this setting to make all the carousel slides equal height. This setting is related to the design settings.

Default Slide Spacing 2.0
Adjust the spacing around each of the default carousel slides.

Default Slide Padding 2.0
Adjust the spacing around the inside of each of the default carousel slides.

Background Color 2.0
Set a background color for the carousel slides.

Default Slide Opacity 1.0
Adjust the opacity of all default carousel slides.

Default Slide Blur 1.0
Adjust the blur of all default carousel slides.

Default Slide Size 1.0
Adjust the size of all default carousel slides.

Default Slide Border Settings 2.0
Add and customize the border for the default carousel slideswith all the standard border settings.

Default Sldie Box Shadow Settings 1.3
Add and customize the box shadow for the default carousel modules with all the standard box shadow settings.

Highlighted Slide Spacing 2.0
Adjust the spacing around the highlighted carousel slide.

Highlighted Slide Padding 2.0
Adjust the spacing around the inside of the highlighted carousel slide.

Highlighted Slide Background Color 2.0
Set a background color for the highlighted carousel slide.

Highlighted Slide Opacity 1.3
Adjust the opacity of the highlighted carousel slide.

Highlighted Slide Blur 1.3
Adjust the blur of the highlighted carousel slide.

Highlighted Slide Size 1.3
Adjust the size of the highlighted carousel slide.

Highlighted Slide Border Settings 2.0
Add and customize the border for the highlighted carousel slide with all the standard border settings.

Highlighted Slide Box Shadow Settings 1.3
Add and customize the box shadow for the highlighted carousel slide with all the standard box shadow settings.

Hover Settings

Responsive Settings

Divi Carousel Make visibility settings to show or hide the carousel on Desktop Tablet and Phone
Divi Carousel Maker Responsive Settings
Divi Carousel Maker Responsive arrow and dot Settings

Miscellaneous Settings

Last updated August 19, 2024
0

Your Cart