Overview
In this guide, you will learn everything you need to know about the carousel responsive settings and how they work. These settings are spread throughout all of the other settings, allowing you to change almost everything per device on Desktop, Tablet, and Phone. These thoughtful and helpful settings truly set our plugin apart even more, providing exactly what customers and visitors need! The responsive settings can be found throughout the carousel settings. You should also check out the responsive settings demo to get some inspiration, or download our free layouts on the demo site to give you a quick start!
View Live Demo
View Settings List
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.
