3. Carousel Controls

The Carousel Controls tab lets you configure how your event layouts behave when using carousel-based presets (Carousel, Center Carousel, Multi Row Carousel, and Ticker). Options vary depending on the layout selected.

Carousel Control #

1. Row: Set the number of rows for different devices. This option appears only when the Multi Row Carousel layout is selected.
2. Slide to Scroll: Define how many event(s) move at a time during carousel scrolling.
3. Autoplay: Enable or disable automatic carousel sliding.
4. Autoplay Speed: Set the autoplay interval in milliseconds. (e.g., 2000ms = 2 seconds)
5. Carousel Speed: Adjust the animation speed of the carousel in milliseconds.
6. Pause on Hover: Enable or disable pausing when the user hovers over the carousel.
7. Lazy Load: Enable or disable lazy loading for images, improving page performance.
8. Preloader Color: Select a color for the preloader that appears while content loads.
9. Carousel Direction: Choose the scroll direction:
   • Right to Left (default)
   • Left to Right
10. Transition Effect: Select the animation effect for carousel slides. Available options:

• Slide
• Fade
• Colverflow
• Cube
• Flip

Navigation #

1. Navigation: Show or hide carousel navigation arrows. You can also hide navigation only on mobile.
2. Select Position: Choose where to display navigation arrows. Available positions:
   • Top Right
   • Top Center
   • Top Left
   • Bottom Left
   • Bottom Center
   • Bottom Right
   • Vertically Center Outer
   • Vertically Center Inner
   • Vertically Center Inner (on Hover)
3. Choose an Icon: Select an arrow icon style from the available options.
4. Arrow Icon Size: Set the arrow size in pixels.
5. Navigation Border Radius: Adjust the border radius of the navigation icons.
6. Navigation Color: Customize navigation styles with:
   • Color
   • Hover Color
   • Background
   • Hover Background
   • Border
   • Hover Border

Pagination #

1. Pagination: Enable or disable pagination. You can also choose to hide pagination on mobile.
2. Pagination Type: Select the pagination style:
   • Dots
   • Numbers
3. Pagination Color: Customize pagination appearance with the following options:
   • Color
   • Active Color (dots only)
   • Background (numbers only)
   • Hover Background (numbers only)
4. Dynamic Pagination: Enable this option to update pagination dynamically based on carousel content.

Miscellaneous #

1. Adaptive Carousel Height: Automatically adjust carousel height based on the tallest slide.
2. Tab and Key Navigation: Enable carousel navigation with the tab key and keyboard arrows.
3. Touch Swipe: Allow users to swipe through carousel slides on touch devices.
4. Mouse Draggable: Enable dragging with a mouse to scroll through slides.
5. Mouse Wheel: Enable scrolling through carousel slides using the mouse wheel.

Ticker Mode (special options) #

If you select the Ticker layout, additional options are available:

1. Carousel Speed – Set ticker scrolling speed in milliseconds.
2. Column Width – Define the width of each ticker item.
3. Pause on Hover – Pause scrolling when hovering over the ticker.
4. Carousel Direction – Choose ticker direction (Right to Left / Left to Right).