ATTN Hero Banner – Image Banner Slider & Carousel

Create reusable image banners, hero sliders, and carousels without a page-builder add-on. Choose an Image Overlay or Content Card layout, customize each slide in the live desktop and mobile preview, then add the finished banner to a page using a shortcode or WordPress block.

Use a single slide for a static hero banner or add more slides to create a carousel. Each slide can show one image, two side-by-side images, or just a background color. Add a heading, supporting text, and up to two buttons. The settings include image overlay colors, content positioning, and mobile-specific controls.

Features include:

• Live desktop and mobile preview
• Image Overlay and Content Card templates
• One or two images per slide
• Optional mobile-specific images
• Multiple slides with autoplay, arrows, dots, swipe, slide or fade transitions
• Separate desktop and mobile typography and alignment
• Optional mobile content container below the image
• Colors, overlays, padding, sizing, buttons and content positioning
• Draft, publish, duplicate and reorder workflows
• [attn_hero id="123"] shortcode
• Dynamic Gutenberg block
• No external services, tracking or accounts

Source code

The JavaScript in assets/admin.js, assets/block.js, and assets/frontend.js is the original, unminified source code shipped directly to WordPress. It is written using WordPress-provided JavaScript APIs and does not require npm, webpack, transpilation, or another build tool. No compiled JavaScript is included.