Overview
In this guide, you will learn everything you need to know about the carousel scroll settings and how they work. These features allow you to control how the carousel moves and functions, and are great for creating the perfect user experience for your visitors viewing the carousel. This includes options like auto scroll, continuous smooth scroll, animation speed, scroll interval timing, infinite scroll, and scroll direction. The auto scroll settings can all be found in with the other carousel settings in Row settings>Column settings>Carousel tab in the Scroll Settings toggle. You should also check out the scroll 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
Number Of Modules Per Scroll
This setting controls the number of modules that move each time when either a navigation button is clicked or auto scroll is enabled. By default, this is set to 1, but you can change this as preferred. For example, you may have 3 modules shown at a time, and you may prefer to have all 3 move along and 3 new ones will move in each time.
Starting Module Order
Choose an option to set how the carousel modules should start when the page loads.
Default
The default setting means the modules will show in descending order according to how the modules are arranged in the column. The module at the top will be the first one in the carousel.
Random
If you do not want the modules to show in the default order, you could try the random setting. This will show the modules in a different random order every time the page loads.
Specific Module
If you want to start on a specific module, then you can choose this option. A new setting will appear below to set the number.
Specific Starting Module Number
If you want the carousel to start on a specific module, you can choose the Specific Module option from the Starting Module Order setting. Then this new setting will appear to enter a number that represents that module. This module will be the first one that shows when the page loads.
Scroll Animation Speed
This setting sets the transition animation speed of the carousel scroll, which means it controls how fast the modules move each time one of the navigation buttons are click or when auto scroll is enabled. This effect is set to 500ms by default.
Infinite Scroll
This setting determines if you want the carousel to keep scrolling in an infinite loop when it reaches either end. With this off, the carousel will scroll either left or right until it reaches the end, and stop, and then it will need to go the other way. But with this turned on, it will keep going in a loop and the same items will keep coming around even if you continue to scroll in one direction. This is enabled by default.
Conditional Navigation Buttons
If you turn the Infinite Scroll setting off, then the carousel will have a left and right limit on how far it can scroll in that direction. In order to prevent confusing from users, this setting allows you to give a visual indication that the start or end limit has been reached, and they cannot scroll any farther in that direction. You can choose to hide the buttons completely or change their opacity. This setting only applies when the Infinite Scroll setting is turned off and Navigation Buttons are turned on.
- Hide Buttons
- Change Opacity
Hide Buttons
This option will completely hide the navigation button as you reach the first or last module in the carousel.
Change Opacity
This option will reduce the opacity of the buttons to 25% by default and remove the ability to click on the button. You can adjust the opacity in the next setting.
Conditional Navigation Button Opacity
This setting allows you to adjust the opacity of the left or right conditional navigation buttons. This setting appears when the Conditional Navigation Buttons setting is set to Change Opacity.
Auto Scroll
To begin using any of the settings related to automatic scrolling, you first need to enable the toggle called “Auto Scroll” in the settings. Once this is enabled, additional settings will appear which will allow you to make adjustments to the settings or choose various options.
Auto Scroll Interval Timing
This setting determines the amount of time that passes between each time the carousel automatically scrolls. This works as milliseconds, so multiply seconds by 1,000 to find the value you want. For example, if you want the timing to be 5 seconds between each scroll, you would set the speed to 5000.
Auto Scroll Direction
This feature allows you to change the horizontal direction of the sliding modules. It allows you to choose between two options:
- Right-To-Left
- Left-To-Right
Right-To-Left
If you select the Left-To-Right option, then the modules will start from the left and go to the right.
Left-To-Right
If you select is Right-To-Left, then the modules will start from the right and go to the left.
Continuous Smooth Auto Scroll
When this option is not enabled, then the automatically moving carousel has a small pause between each movement to the next module. But after enabling this option there is no pause and instead there is a smooth continuous scrolling effect.
Note that when this setting is enabled, it is incompatible with any navigation buttons or conrrols, so we automatically hide those settings when using Continuous Smooth Auto Scroll.
Smooth Scroll Speed
When the Continuous Smooth Auto Scroll is enabled, a new setting appears to set the speed of the continuous smooth scrolling effect
This works as milliseconds, and the default is set to 3,000. Since there are 1,000 milliseconds in a second, this is equal to 3 seconds, which means the amount of time for one module to fully move over to the next position is 3 seconds. If you want to change the timing to 5 seconds, for example, simply multiply by 1,000 and set the speed to 5,000.
Pause Auto Scroll On Hover
This feature allows you to pause the automatic scroll effect when hovering over any specific module in the carousel. This option is very useful as it provides time for the visitor to look closely at the product or information that you are showcasing.
Touch Swipe
This setting enables the ability to swipe the carousel modules with your finger on touch enabled devices. If this was disabled, then the alternative would be to only use the navigation buttons. This setting is turned ON by default.
Mouse Drag
This setting enables the ability to drag the carousel modules with your mouse. If this was disabled, then the alternative would be to only use the navigation buttons. This setting is turned ON by default.
Unrestricted Swipe & Drag
This setting allows visitors to use the Touch Swipe and Mouse Drag settings without limit to move freely to any slide. When disabled, this is limited to the Number Of Modules Per Scroll Setting. This is enabled by default.
Keyboard Navigation
This setting gives users the ability to navigate through the carousel using keyboard arrow keys. If more than one carousel is on the same page, then it affects the one closes to the mouse cursor.
Scroll Transition Effect
This setting allows you to change the scroll transition animation effect from the default slide to something else. You can select one of the options from the dropdown setting. These include fade, coverflow, stack, flip, and cube! These allow you to make nicely animated carousels that you sometimes see on modern websites.
