Overview
The Divi Carousel Maker plugin provides tons of navigation options for enabling your website visitors to scroll through the carousel. In this guide, you will learn everything you need to know about the carousel navigation controls settings and how they work. You can choose to show dots, numbers, or images. They include all the necessary default and active design settings, height and width settings, alignment and spacing settings, and you can even adjust each setting per device to make everything responsive. The navigation controls settings can all be found in with the other carousel settings in Row settings>Column settings>Carousel tab in the Navigation Controls Settings toggle. You should also check out the navigation controls settings demo to get some inspiration, or download our free layouts in the demo site to give you a quick start!
View Live Demo
View Settings List
Setting Tabs
The navigation controls settings are divided into tabs to make it easier to user.
- Common
- Default
- Active
Common
The Common tab has any shared settings that affect the overall navigation buttons in general. This includes any settings that would apply to both the default and active states.
Default
The Default tab has all the design settings that affect how the regular controls are styled. You can adjust the width and height, background color, text color, borders, box shadow, and more.
Active
The Default tab has the exact same design settings as the Default tab, but these only affect how the active controls are styled. You can adjust the width and height, background color, text color, borders, box shadow, and more.
Show Navigation Controls
To show the carousel navigation buttons and adjust the settings, you first need to enable the option. To do this, open up the Navigation Controls Settings toggle and enable the setting toggle called Show Navigation Controls. Once this is enabled, all the navigation controls settings will appear below for you to customize and style.
Navigation Controls Type
There are three options to choose from for the navigation controls:
- Dots
- Numbers
- Images
By default, this will be set to Arrows Only. This is the most common type of navigation, but we also include the option for Text Only and Both Arrows & Text.
Design Settings
Each of the Navigation Controls Type have very similar design settings available to customize every aspect of the dots, numbers, or images. We include all the standard design settings you expect from Divi for each of the control types. This includes separate design settings for the active control and the other default controls. Rather than list them all here, you can check the main settings list to see more details.
- Alignment
- Spacing
- Color
- Width
- Height
- Border
- Box Shadow