How this hero carousel works
The hero above is three ordinary Avada containers. Each one carries the CSS class wpai-hero-slide (Container options › General › CSS Class). Any two or more consecutive containers with that class are assembled into a single carousel on the published page – arrows, dot navigation, swipe on mobile, and auto-advance every seven seconds that pauses on hover or keyboard focus.
To add a slide: clone one of the containers in the builder and change its background image and text. To remove one: delete the container. To reorder: drag the containers. Nothing else to configure.
Options (add as extra CSS classes on the first slide): wpai-hero-noauto stops the automatic rotation, and wpai-hero-interval-10000 sets the speed in milliseconds.
Requirements: the wp-ai-sync plugin (2.42.1 or newer) and the page set to the 100% Width template. Slide backgrounds can be swapped from WP-AI’s Apply Images screen like any other image. Without JavaScript the slides simply stack, so nothing is ever hidden from search engines.





















