Important Things To Note

Use The Responsive Settings

Don’t forget you can open the responsive tabs to adjust settings on all three Divi breakpoint sizes, Desktop, Tablet, and Phone. This is very important for some settings.

Number Of Items

By default, the number of items showing in the carousel on each device are 3 on Desktop, 2 on Tablet, and 1 on Phone. This works pretty well, but you can adjust this however you want. 

Navigation Arrows

Keep in mind, you can choose to enable or disable things like the navigation arrows per device! So let’s say you only want the arrows to show on Desktop since those are needed for mouse navigation, but turn them off on Tablet and Phone to make more room since the user can swipe on touch screen devices. To do this, simply open the responsive tabs and turn off the toggle for Phone.

You could also change the font size of the arrows on Phone, and leave them bigger on Desktop.

You can do this for any setting.

Enable Or Disable The Carousel Per Device

Custom Carousel Visibility Settings

If you only want your modules to be in a carousel on mobile, then just disable the carousel on Desktop and Phone. Or if you only want the modules in a carousel on Desktop, but not Tablet and Phone, just disable it on those devices.

Combining It With Divi Visibility Settings

You could take this even further beyond the plugin settings and combine it with the built-in Divi Visibility settings in the rows and columns. As an example, if you wanted to create a row of 4 columns on Desktop, and only wanted a carousel on Phone, you could duplicate the row, show it Desktop, and show a different row on Phone that has the carousel enabled

Responsive Design

This plugin not only provides valuable options for the creation of the slider but also provides the feature to customize all of them according to the screen sizes and this allows us to create a responsive design of our carousel. When we hover over the property we see a phone icon and if we click on that, we get the option to select the screen where we want to make the changes.

Number of Modules Shown Per Device

By using the responsive design, we can set the number of modules that we want to show in a single slide for all the screen sizes. As you can see in the screenshot, on the desktop screen the number of modules is set to 4 and to change this number for the tablet screens, I can select the tablet icon first and then change the number and the same I can do for the mobile screens.

Number of Modules Per Scroll

The responsive functionality allows us to set the number of modules that we want to move out from the screen per scroll or slide for every screen size. For example, in the screenshot, we can see that for desktop the value of the property is set to 1, and for changing this value for the tablet we need to select the tablet icon first and then change the value, and the same we can do for the mobile.

Scroll Animation Speed

We can change the speed of the animation that means we can control how fast or slow the slide should move for different screen sizes by selecting the screen on which we want to make the change first and then changing the value.

Infinite Scroll

We can enable and disable the infinite scroll option for different screen sizes by clicking on the screen icon on which we want to make the change and then enabling or disabling the property.

Auto Scroll

We can enable and disable the auto-scroll property for different screen sizes by clicking on the screen icon on which we want to make the change and then enabling or disabling the property. As we can see in the screenshot the property is enabled for the desktop and I can disable it for the tablet or mobile if I want.

Continuous Smooth Auto Scroll

By using the responsive functionality we can enable or disable the continuous smooth auto-scroll property for different device sizes by clicking on the device icon. An extra piece of information here is this property allows us to scroll our carousel continuously without stopping for a bit and because of this behavior we cannot use the Auto Scroll Interval Timing property when this is enabled.

Pause Auto Scroll on Hover

Pause auto scroll property allows us to pause the slide when we hover over the carousel module and we can change this behavior for different device sizes by selecting the screen first and then enabling or disabling the property. In the screenshot, the property is enabled for the desktop and it can be disabled for the tablet or the mobile by clicking on the respective icons and then making the change.

Center Mode

This property allows us to bring the modules to the center and by using the responsive functionality we can enable or disable the property to show different results for the different device sizes.

Center Mode Type

When we enable the center mode property we see the center mode type property as well which gives us to options:

• Default
• Highlighted

We can change this property as well for different devices sizes and depict on which screen we want to hightlight the center or set it to default.

Module Spacing

We can change the spacing of the modules for different screen sizes by selecting the screen icon first and then changing the value. This functionality is a great addon to this property as this enhances the responsiveness of the carousel to a different level.

Show Navigation Arrows

By using the responsive functionality we can choose the screen on which we want to show the navigation arrows and on which we want to hide them by selecting the screen icon and then enabling or disabling the property. The responsive functionality also allows us to set the customizations of these navigation arrows differently for different device sizes.

Navigation Arrow Position

We can change the position of the navigation arrows for different device sizes by selecting the screen and changing the position from the dropdown.

Navigation Arrow Background Color

We can change the background color of the navigation arrows for different device sizes by selecting the screen and changing the color.

Navigation Arrow Font Size

We can adjust the size of the navigation arrow for different screens by selecting the screen and changing the value of the navigation arrow font size property.

Navigation Arrow Color

We can change the navigation arrows color for different screens by selecting the screen and changing the color.

Navigation Arrow Padding

We can change or set the value of the padding of the navigation arrows for different device sizes by selecting the screen first and then changing the value.

Navigation Arrow Border

We can customize the navigation arrow borders differently for different device sizes. Not only this we can customize all the border properties except the border styles for different device sizes.

Border Width

We can change the width of the border for different device sizes by selecting the screen first and then changing the value.

Border Color

We can change the color of the border for different device sizes by selecting the screen first and then changing the color.

Border Style

We can change the type of the border for different screens by selecting the screen first and then selecting the border style from the dropdown.

Navigation Dot Color

By using the responsive functionality we can change the color of the navigation dots for different screen sizes

Active Navigation Dot Color

By using the responsive functionality we can change the color of the active navigation dot for different screen sizes

Navigation Dots Font Size

By using the responsive functionality we can change the font size of the navigation dots for different screens by selecting the screen icon where we want to change the value and then changing the value.

Disable On

This property allows us to hide the slider on different device sizes. For example, if you want to hide the slider for the mobile devices then you can do that by checking the box before the phone, and same you can do that for desktop and tablet screens.

Size Change Factor

By using the responsive functionality we change the value of size change factor property for different devices which allows us to set different hover results on different devices. To change the value for different screens, select the screen first by clicking on the screen icon and then change the value.

Animation Duration

By using the responsive functionality we change the duration of the animation for different screens by selecting the screen first and then changing the value.

Animation Duration

By using the responsive functionality we change the duration of the animation for different screens by selecting the screen first and then changing the value.

Animation Speed Curve

We can change the easing method of the animation for different screen sizes. To do that first we need to click the screen icon to select the screen and then change the value from the dropdown.