Autoplay & Progress Bar

The Autoplay & Progress Bar feature lets your tabs cycle automatically and shows users how much time remains before the next slide. It’s perfect for showcasing featured content, tutorials, or timed announcements without requiring clicks.

Where to Find the Settings

1. Select your Tabs block in the editor.
2. In the block sidebar under Autoplay Settings, enable Autoplay to start automatic tab switching, then set the speed and hover behavior.
3. Under Progress Bar Settings, toggle Progress Bar to display a visual countdown indicator and choose its position and thickness.
4. For color customization, switch to the Styles tab in the sidebar and adjust Progress Color and Background Color.

Placeholder – replace with your actual screenshot.

Autoplay Options

• Autoplay: Enables automatic cycling through tabs without clicking. Autoplay is only active when the Trigger Type is set to Click; if you choose Hover, the tabs switch on mouseover instead, so autoplay is disabled. Additionally, autoplay cannot run alongside Sticky & Scrollable Tabs, as those behaviors take over tab interaction and timing.
• Speed: Define how long each tab stays visible before moving to the next (1–30 seconds).
• Pause on Hover: When enabled, hovering over the tab content will pause autoplay until the cursor leaves.

Progress Bar Settings

• Progress Bar: Show or hide the progress indicator beneath the tabs.
• Position: Choose where the bar appears:
  • Top (above tab buttons)
  • Bottom (below tab content)
  • Left (vertical bar on the left side)
  • Right (vertical bar on the right side)
• Thickness: Define the bar’s height or width in pixels for a subtle or prominent look.
• Background: Set the track color behind the progress indicator.

Color controls are located under the Styles tab:

1. Click Styles in the block sidebar.
2. Adjust Progress Color for the fill and Background Color for the track.

How It Works

1. Enable Autoplay and choose your preferred speed.
2. Toggle Progress Bar and set its placement and thickness.
3. Customize colors in the Styles tab to match your design.
4. Preview in the editor or on your page to fine-tune timing and styling.

Best Practices

• Use shorter speeds (3–5 seconds) for quick highlights.
• Enable pause on hover when content requires reading time or interaction.
• Ensure color contrast for both progress and background to maintain accessibility.

With Autoplay & Progress Bar, you can create dynamic, self-running tab experiences that engage users and guide them through your content effortlessly.