Image carousel widget that people actually use.

NN/g has been studying carousels since 2013, and their consistent finding is that auto-rotating homepage hero carousels underperform static heroes for conversion. Visitors interpret motion as advertising and tune it out (banner blindness applied to your own content). The first slide receives 50-89% of any clicks the carousel earns, and slides 4 and beyond often get under 1% combined. The pattern survives anyway because it lets stakeholders avoid choosing one message over another. The honest takeaway: if you are using a hero carousel because the homepage felt empty or because three teams each wanted their slide, ship a static hero with the strongest message instead. If you are using a carousel because visitors genuinely want to browse multiple images of the same thing (a product, a portfolio, a property listing), carousels are the right pattern and they work well.

Even in the placements where carousels work, three controls are required to make them usable: pause-on-hover (so visitors can read a slide without it disappearing), pause-on-focus (so keyboard users do not have content scroll out from under them), and visible prev/next controls (so the navigation pattern is discoverable without hover). Many popular carousel libraries default these to off. The reasoning is usually that auto-rotation 'shows more content' but the actual effect is that visitors miss the slide they wanted, get frustrated, and bounce. Poper ships all three controls on by default, with auto-rotation off by default. If you turn rotation on, the controls remain. This produces a carousel visitors navigate instead of one they ignore.

The W3C ARIA Authoring Practices Guide includes a specific carousel pattern that has been the de facto accessibility standard since 2018. The required attributes: role=region on the outer container, aria-roledescription=carousel, an accessible name via aria-label or aria-labelledby, slide labels with role=group and aria-roledescription=slide, prev/next buttons with descriptive aria-labels, and a live region (aria-live=polite) that announces position when slides change. If auto-rotation is on, a Pause/Play control is also required, and rotation must pause when any element inside the carousel receives keyboard focus. Most third-party carousel widgets implement maybe half of this. Carousels that fail accessibility audits commonly do so on this exact pattern. Poper implements the full ARIA Authoring Practices spec by default.

Cumulative Layout Shift (CLS) is one of three Core Web Vitals Google uses for ranking, with a Good threshold of 0.1, Needs Improvement at 0.1-0.25, and Poor above 0.25. Image carousels are notorious CLS offenders because slides load asynchronously and push surrounding content around when they decode. The fix is to reserve each slide's width and height in the markup before the image loads (either via explicit width/height attributes that match the image's intrinsic ratio, or via aspect-ratio CSS). Poper does this on every slide. CLS for the carousel area stays at 0, which means embedding the carousel does not move your overall page CLS at all. Many third-party carousels score 0.15-0.30 in isolation, which can push an otherwise-Good page into Needs Improvement.

Multiple A/B testing studies (the most-cited one from Erik Runyon at Notre Dame in 2013, replicated several times since) show that on homepage hero placements, replacing an auto-rotating carousel with a single static hero with one clear value prop and one CTA increases conversion by 30-200% depending on baseline. The mechanism is straightforward: visitors who land on a homepage have a brief decision window before they bounce. Motion in the hero competes with the CTA for attention and almost always loses. A static hero with one message and one CTA respects that decision window. Where carousels do win conversion battles: product detail pages (where browsing multiple images is the user's task), agency portfolio pages (where the visual is the value prop), and SaaS feature tour sections (where the user is already evaluating and wants to see the product). The honest pattern for choosing: if visitors are in browsing mode and want to see variety of one thing, use a carousel. If visitors are in deciding mode and need one clear next step, use a static hero.