ATTN Hero Banner – Image Banner Slider & Carousel
Create image overlay banners with one or two images, responsive content and customizable layout settings.
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.