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 Slides Per Scroll
This setting controls the number of slides 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 slides shown at a time, and you may prefer to have all 3 move along and 3 new ones will move in each time.
Starting Slide Order
Choose an option to set how the carousel slides should start when the page loads.
Default
The default setting means the slides will show in descending order according to how the slides are arranged in the column. The slides at the top will be the first one in the carousel.
Random
If you do not want the slides to show in the default order, you could try the random setting. This will show the slides in a different random order every time the page loads.
Specific Slide
If you want to start on a specific slides , then you can choose this option. A new setting will appear below to set the number.
Specific Starting Slide Number
If you want the carousel to start on a specific slide, you can choose the Specific Slide option from the Starting Slide Order setting. Then this new setting will appear to enter a number that represents that slide. This slide 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 slide 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 slide 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 slides. 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 slides will start from the left and go to the right.
Left-To-Right
If you select is Right-To-Left, then the slides 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 slide. 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 slide 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 slide 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 slides 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 slides 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 Slides 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.
