FAIR

Federated and Independent Repositories

AdBrains Hero Slider

Plugin Banner

AdBrains Hero Slider

by adbrainstech

Download
Description

Hero Block is a Gutenberg-native block plugin that allows you to build beautiful hero banners and sliders with powerful customization options.
It contains two main blocks:

1. Hero Slider Block (parent block)
— Allows creating slideshows for hero sections
— Supports autoplay, fade/slide effects, arrows, pagination and more
(Defined in: adbrains-hero-slider/adb-hero-slider)

2. Hero Slide Block (child block)
— Each slide can be an image or video
— Includes overlay colors, gradients, alignments, animations and more
(Defined in: adbrains-hero-slider/adb-hero-slide)

Perfect for landing pages, banners, hero sections, and visually rich headers.

✨ Key Features

Hero Slider (Parent Block):
– Full-width & wide alignment
– Autoplay with delay control
– Pause autoplay on hover
– Fade or slide animations
– Arrow navigation toggle
– Pagination dots (bullets)
– Custom transition speed
– Looping slides
– Custom slides-per-view and spacing

Hero Slide (Child Block):
– Select image or video background
– Video controls & poster image
– Overlay color with opacity control
– Gradient overlay support
– Vertical & horizontal alignment
– Wide or full content width
– Animation type & delay
– Image object-fit control

Technical

  • 100% Gutenberg / Block Editor native
  • Uses block.json specification
  • Includes editor scripts, styles, and front-end View Script
  • No external dependencies (lightweight)

Third-Party Software

This plugin bundles the following third-party library:

  • Swiper (v12)
    • License: MIT License
    • Source: https://swiperjs.com/
    • Copyright (c) Vladimir Kharlampidi
  1. Upload the plugin folder to /wp-content/plugins/adbrains-hero-slider
  2. Activate the plugin from the WordPress Plugins menu
  3. Open the block editor and search for:
    • Hero Slider
    • Hero Slide
  4. Add slides inside a Hero Slider block
  1. Hero Slider block in editor

    Hero Slider block in editor

  2. Hero Slide settings panel

    Hero Slide settings panel

  3. Front-end slider example

    Front-end slider example

  4. Overlay and animation options

    Overlay and animation options

Does this support Full Site Editing themes?

Yes, it works on block themes and classic themes.

Can I use videos in slides?

Yes. Each Hero Slide supports video backgrounds.

Does it work without JavaScript frameworks?

Yes. It only uses native block editor scripts and a minimal view.js runtime.

Are animations included?

Basic animation types and delay settings are provided per slide.

1.0.0

  • Initial release of Hero Block
  • Hero Slider block added
  • Hero Slide block added
Back to top