The content tab starts with a search option. You can give a quick search for your desired settings. This option is handy when you have a carousel made, and you want a change in a particular area.
Underneath search, Your carousel items are listed. You can drag and move those items to rearrange. You will find documentation for adding content and designing here for individual items.
Here we are going through all the global settings which will affect the whole carousel. Lets Drive in-
Slider Settings
Item width control: First thing in the list is item width control. By default, it’s OFF. You can turn it ON and give a custom width of a carousel.
Show Item: If you would like to show a specific number of items, which is ideal. You can Keep item width control OFF and give the desired number in those fields – Show item desktop, Tablet & Mobile.
Note: Item width and height will depend on the number of items and module width.
Multi-slide: Multi-slide will allow the carousel to slide through all the items (given number in show item) at once. It does not work with item width control.
Transition Duration: You can give transition duration for your carousel from here.
Center Slide: Center slide will start the carousel from the center. If you Keep the loop ON you will see your carousel is center-focused.
Loop: Turning ON loop will make the carousel repeatable for an infinite time.
AutoPlay: Once you reach to carousel it will play automatically if this feature is turned ON. If you turn this ON some new feature will show up underneath this.
Pause on Hover: This feature will allow your autoplay to pause when you hover over the carousel.
Scroller Effect: If you turned ON the scroller effect your carousel will play smoothly without delay. Turning this ON will show another option named transition duration for scroll effect which can be selected from 1 to 15 seconds. Allowing the scroller effect will disable the Autoplay Delay option.
Autoplay Delay: You can define the duration of delay for your carousel. It Milliseconds(MS) field.
Arrow Navigation: Arrow navigation will show clickable arrows to navigate to the next item of your carousel.
Dot Navigation: Dot navigation will show clickable dots underneath your carousel based on the item number you have. Allowing this feature will show the alignment for those dots.
Item Spacing: You can increase or decrease the space between the item of your carousel.
Equal Height Item: This will make all your items the same size. You will see the effect if you have a background, border or shadow on it. This will not change your image size. Turning this ON will disable vertical alignment.
Vertical Align: You can align your carousel vertically in three different positions.
Lazy Loading: Lazy loading will defer the initialization of an item image until the point at which it is needed. This will only load the image when it’s visible. This will help to load pages faster.
Hash Navigation: Hash Navigation will allow you to jump on a specific carousel item from another section or module. We have a tutorial on how to use hash navigation. Please have a look. By default turning hash navigation ON will add a slug to your URL.
Advanced Slider Settings
In Advanced slider settings, you will have the option to select the coverflow slider effect. Cover Flow is an animated, three-dimensional graphical user interface element that will give your carousel a 3D look. You have the option to rotate the carousel as per your need. If you would like, you can give a shadow on your coverflow.
Background: Here, you can select the background color for the carousel items. You can also use a gradient color or background image. Background Image does have options like selecting image size, position, and repeat. This option applies separately to all items on your carousel.
Admin Label: Divi carousel module can be given a custom label so that it does not need to only display as “Module-Type” on your page builder. You can use any name that is convenient for you.
