Scroll Settings
These settings allow you to control how the carousel moves and behaves. You can adjust features such as auto scroll, animation speed, scroll timing, infinite looping, and direction to create a smooth and engaging user experience.
Default
This example demonstrates the carousel using the default scroll settings, providing a baseline for how the carousel behaves out of the box.
Number Of Slides Per Scroll
This example demonstrates a carousel with the Number Of Slides Per Scroll set to "3". By default, this is set to 1, but you can change it as needed. For example, if 3 slides are visible at a time, setting this to 3 allows all visible slides to move together, bringing in 3 new slides with each scroll.
Starting Slide Order
This example demonstrates how the Starting Slide Order can be set to Default, Random, or Specific Slide. Default starts from the first slide, Random changes the order on each page load, and Specific Slide allows you to begin from a chosen slide. In this example, the carousel starts from slide "3".
Default:
Random:
Specific Slide:
Scroll Animation Speed
This example demonstrates how the scroll animation speed affects the transition between slides. The default value is "500ms", and in this example, it has been increased to "1500ms" for a slower and smoother effect.
Infinite Scroll - Conditional Navigation Button Opacity
This example demonstrates how navigation buttons behave when infinite scroll is disabled, including options to hide them or adjust their opacity at the ends of the carousel.
Hide Buttons:
Change Opacity:
Auto Scroll
This example demonstrates how auto scroll works, including direction control and timing intervals that determine how frequently the slides move.
Right-To-Left: 4000ms
Left-To-Right: 5000ms
Auto Scroll - Continuous Smooth Auto Scroll
This example demonstrates the difference between standard auto scroll with pauses and continuous smooth scrolling without interruption.
Auto Scroll - Pause On Hover
This example demonstrates how auto scroll pauses when hovering over a slide, allowing users more time to view the content.
Auto Scroll - Pause If Video Slide Playing
This example demonstrates how auto scroll pauses automatically when a video is playing within the carousel.
Touch Swipe
This example demonstrates how users can navigate the carousel by swiping on touch-enabled devices.
Mouse Drag
This example demonstrates how users can drag the carousel slides using a mouse for interactive navigation.
Enabled:
Disabled:
Unrestricted Swipe & Drag
This example demonstrates how swipe and drag can move freely across slides when unrestricted mode is enabled, instead of being limited by the number of slides per scroll.
Keyboard Navigation
This example demonstrates how users can navigate the carousel using keyboard arrow keys for improved accessibility.
Scroll Transition Effect
This example demonstrates how different transition effects such as fade, coverflow, stack, flip, and cube can change the visual style of the carousel movement.
Slide:
Fade:
Coverflow:
Stack:
Flip:
Cube:
Creative:
Image Module - Example 1
This example demonstrates a carousel with "2" slides per scroll and a slower animation speed of "2000ms". Auto scroll pauses on hover, while touch swipe, mouse drag, and keyboard navigation are disabled.
Blurb Module - Example 2
This example demonstrates a carousel with the starting slide order set to "Random" and auto scroll disabled. Touch swipe, mouse drag, and keyboard navigation are enabled for interactive control.
CTA Module - Example 3
This example demonstrates a carousel with infinite scroll disabled and navigation buttons set to change opacity to "50%". The "flip" transition effect is used for a more dynamic visual style.
Blog Module - Example 4
This example demonstrates a carousel with a scroll animation speed of "3000ms" and the Starting Slide Order set to Specific Slide, beginning from slide "2". The auto scroll direction is set to "left-to-right", and the "coverflow" transition effect is applied.
Blog Post 6
This is a blog post except. It is here for demo purposes to show how it looks.
Blog Post 14
This is a blog post except. It is here for demo purposes to show how it looks.
Blog Post 7
This is a blog post except. It is here for demo purposes to show how it looks.
Blog Post 13
This is a blog post except. It is here for demo purposes to show how it looks.
Blog Post 5
This is a blog post except. It is here for demo purposes to show how it looks.
















