A full-width hero and content slider — a repeater of slides, each carrying a background image, title, subtitle, description, and up to two buttons — for the classic rotating banner pattern that anchors the top of countless homepage designs. Where Custom Carousel shows several items side by side, this widget is built around the opposite structure: one slide, fully occupying the visible width, replaced entirely by the next as the rotation advances.
Building slides
Each slide in the repeater is a complete, self-contained mini hero: a background image, a title, a subtitle, a description, and up to two buttons — enough structure to carry a genuine headline and call-to-action pair per slide, not just a bare image with a caption. Having two button slots per slide matters in practice, since many hero messages genuinely benefit from a primary and secondary action ("Get Started" alongside "Learn More", for instance) rather than being forced into a single call-to-action.
Autoplay and transition
Autoplay with a configurable delay determines whether the slider advances on its own and how long each slide stays visible before transitioning to the next, while a separate transition speed control tunes how quickly the actual slide-to-slide animation itself plays out — two genuinely distinct timing decisions, since a slider can hold each slide for a generous amount of time while still transitioning between them briskly, or the reverse.
Content entrance animation
Beyond the slide transition itself, a separate content fade-in animation governs how each slide’s text and buttons appear once that slide becomes active, with an adjustable stagger controlling the delay between each content element animating in relative to the others — the title appearing slightly before the subtitle, which appears slightly before the description, which appears slightly before the buttons, producing a more considered, sequential reveal rather than every element of a slide appearing simultaneously the instant it becomes visible.
Navigation
Navigation arrows with custom icon options and pagination dots give visitors direct manual control over which slide is showing, working independently of whatever autoplay setting is configured — a visitor who wants to jump straight to a specific slide, or skip ahead of a slow autoplay delay, can do so at any point.
Use it for
Hero banners and content carousels — the primary rotating message area at the top of a homepage, a landing page’s main visual, or any section where a small number of distinct, full-width messages should rotate through the same prominent space one at a time. For a comparison-style row of several items shown simultaneously, Custom Carousel or Ultimate Swiper are the better structural fit instead.
Practical tips
- Keep the total slide count modest — most visitors never wait through more than two or three autoplay cycles, so a slider with many slides means later ones are rarely seen unless a visitor actively navigates to them manually.
- Give the transition speed and autoplay delay enough separation that a slide doesn’t feel rushed — a fast transition combined with a short autoplay delay can make the slider feel frantic rather than polished.
- Use the content stagger deliberately for slides with real message hierarchy — a headline-then-subtitle-then-button reveal reinforces reading order, while a slide with equally weighted elements may read better with minimal stagger.