DOCUMENTATION

Revolutionary Slider Documentation

Build smooth, accessible hero sliders and carousels driven by pure CSS motion. No jQuery, no layout shift, touch and swipe ready, with a block, a shortcode, and a full developer API.

Getting started

Install the plugin and build your first slider in a couple of minutes.

Building sliders

Slides, captions, and CSS-driven motion presets.

Autoplay & touch

Timed autoplay with swipe, loop, and pause-on-hover.

Performance & a11y

Lazy responsive images and accessible controls by default.

Shortcode & block

Embed via shortcode, the Gutenberg block, or a PHP helper.

Hooks & events

Extend the render with filters and front-end events.

Introduction

Revolutionary Slider builds hero sliders and carousels that move smoothly without dragging your site down. Transitions run on CSS transforms rather than a JavaScript animation loop, so motion stays at 60fps and the front-end payload stays tiny. There is no jQuery dependency anywhere.

Each slider is a reusable item you create once and place anywhere through the [revolutionary_slider] shortcode or the dedicated Gutenberg block. A slider is made of slides, and each slide carries an image, an optional caption (heading, subheading, and a call-to-action button), and a link.

This guide walks from installation through the developer API. If you just want a slider on a page in a couple of minutes, jump to Your first slider.

Tip: A slider is reusable. Place the same slider on several pages and it stays in sync, edit it once and every embed updates.

Installation

Revolutionary Slider installs like any standard WordPress plugin, from the bundled .zip archive or straight from the Revolutionary Plugins hub.

  1. Upload the plugin. In your WordPress admin, go to Plugins - Add New - Upload Plugin and choose revolutionary-slider.zip. Click Install Now.
  2. Activate. Once installed, click Activate. A new Revolutionary Slider menu appears in the admin sidebar.
  3. Open the editor. Go to Slider - Add New to create your first slider. No setup wizard, no database tables to provision, sliders are stored as a custom post type.
  4. Verify your license. Paste your license key under Slider - Settings - License to unlock the full preset library, caption animations, and automatic updates.

Heads up: Slider images come from your Media Library, so make sure the images you want to use are uploaded first. For crisp results on retina displays, upload source images at least twice the width of the slider's display size.

Your first slider

Let's build a three-slide hero and drop it on the homepage. The whole thing takes about two minutes.

  1. Create a slider. Go to Slider - Add New and give it a name like "Homepage hero". Set the aspect ratio (for example 16:9) so every slide reserves the same space.
  2. Add slides. Click Add slide, pick an image from the Media Library, then fill in the heading, subheading, and an optional button with its link. Repeat for a couple more slides.
  3. Pick the motion. Open the Motion tab, choose a preset such as Zoom fade, and set the duration. Use the live preview to confirm the transition feels right.
  4. Tune autoplay. On the Autoplay tab, turn on autoplay, set the interval, and decide whether the slider loops. Pause-on-hover is on by default.
  5. Embed it. Click Save, copy the generated shortcode, and paste it into your homepage, or add the Revolutionary Slider block and pick this slider. Preview the page, your slider is live.

That's the full loop: build slides, set motion, configure autoplay, embed. Everything else in this guide refines these same tabs.

Slides & captions

A slide is the unit you build with. Every slide has an image and an optional caption layer that sits on top. The caption is made of up to three parts, all optional: a heading, a subheading, and a button with a link.

Reorder slides by dragging the slide chips, duplicate a slide to reuse its caption settings, and toggle any slide's caption off to ship a clean image-only slide. The caption position (corners, center, or edges) and text alignment are set per slide with no CSS, though you can add a custom class to any caption for finer control.

Motion presets

The transition between slides is driven entirely by CSS, so it stays smooth and cheap. Pick a preset, then optionally adjust duration and easing. Caption elements can animate in separately once the slide settles.

Preset What it does Best for
Fade Cross-fades opacity between slides, no movement. Calm, editorial heroes
Slide Translates the outgoing slide out as the next slides in. Classic carousels
Push Both slides move together as one strip. Galleries & product shots
Zoom Scales the incoming slide up from a slight zoom. Dramatic hero entrances
Zoom fade Combines a subtle scale with a cross-fade. Premium, cinematic feel
Flip (Pro) Rotates the slide on a 3D axis as it changes. Playful, attention-grabbing
Blur (Pro) Blurs out the old slide and sharpens in the new one. Soft, modern transitions
Reveal (Pro) Wipes the next slide in behind a moving mask. Bold, branded heroes

Duration is set in milliseconds and easing accepts the standard CSS keywords or a custom cubic-bezier. When a visitor has reduced motion enabled, every preset gracefully degrades to a plain cross-fade so nobody gets a face full of movement.

Autoplay & touch

Autoplay advances slides on a timer you control. By design it is considerate: it pauses the moment a visitor interacts and resumes only when they leave the slider alone.

  • Interval: set how long each slide is shown, in milliseconds.
  • Pause on hover and focus: autoplay halts while the pointer is over the slider or a control is focused. On by default.
  • Loop mode: choose continuous loop, ping-pong (reverse at the end), or stop on the last slide.
  • Reduced motion: when the visitor prefers reduced motion, autoplay is disabled entirely.

Touch and swipe are handled with Pointer Events, so the same code path serves phones, tablets, and trackpads. Dragging tracks the visitor's finger in real time and snaps to the nearest slide on release, with a small velocity threshold so an accidental tap never flips a slide.

Tip: If a slider sits inside a horizontally scrollable area, set Swipe threshold a little higher so a horizontal page gesture doesn't get captured as a slide change.

Lazy & responsive images

Images are the heaviest part of any slider, so the plugin loads them carefully. The first slide loads eagerly for a fast first paint; every other slide carries loading="lazy" and only decodes when it's about to appear.

Each slide image is output with a responsive srcset and sizes attribute built from the registered WordPress image sizes, so a phone never downloads a desktop-width hero. Crucially, every image carries explicit width and height and each slide reserves its space with a fixed aspect ratio.

Performance note: Because every slide reserves its space ahead of time, a slider contributes effectively zero to Cumulative Layout Shift. Avoid swapping the first slide's image with custom JavaScript after load, that is the one change that can reintroduce a shift.

Accessibility

A slider is a notorious accessibility trap, so this one ships correct by default. The controls are real, the roles are right, and nothing moves against the visitor's wishes.

  • Real buttons: arrows and pagination dots are <button> elements with descriptive labels, not clickable <div>s.
  • Carousel semantics: the slider exposes the appropriate ARIA roles and a live region so screen readers announce slide changes.
  • Keyboard control: arrow keys move between slides when the slider has focus, and tab order is logical.
  • Visible focus: controls show a clear focus ring, never suppressed.
  • Reduced motion: the prefers-reduced-motion media query disables autoplay and softens transitions to a cross-fade.

The current slide's dot is marked with aria-current, and pausing autoplay on focus means a keyboard user is never racing a timer to read a caption.

Shortcode & block

Embed a slider anywhere with the shortcode. The only required attribute is the slider id, which appears in the slider list and the editor URL. Most settings live on the slider itself, but you can override key ones inline.

// Basic embed, render slider #7
[revolutionary_slider id="7"]

// Override autoplay and the motion preset inline
[revolutionary_slider id="7" autoplay="true" interval="6000" preset="zoom-fade"]

In the block editor, search for "Revolutionary Slider", insert the block, and pick a slider from the dropdown, you'll see a live preview right in the canvas. The block exposes the same overrides as the shortcode through the inspector sidebar.

You can also render a slider from PHP in a template using the helper function:

if ( function_exists( 'revslider_render' ) ) {
    echo revslider_render( 7, [ 'autoplay' => true, 'interval' => 6000 ] );
}

Settings filter

The revslider_settings filter lets you change a slider's resolved settings just before it renders, globally or for a specific slider. This is the cleanest way to enforce a house style across every slider on a site without editing each one by hand.

add_filter( 'revslider_settings', function( $settings, $slider_id ) {
    $settings['preset']   = 'zoom-fade';
    $settings['duration'] = 600;
    if ( 7 === $slider_id ) {
        $settings['interval'] = 7000;
    }
    return $settings;
}, 10, 2 );

The settings array carries every resolved option, including preset, duration, easing, autoplay, interval, loop, pause_on_hover, and aspect_ratio. Returning a modified array changes how the slider renders without touching its saved configuration.

Hooks & events

You can extend both the server-side render and the browser behavior. On the PHP side, the revslider_slide_html filter lets you wrap or augment the markup of each slide, here we append a small badge to the first slide:

add_filter( 'revslider_slide_html', function( $html, $slide, $index ) {
    if ( 0 === $index ) {
        $html .= '<span class="rs-badge">Featured</span>';
    }
    return $html;
}, 10, 3 );

On the front end, each slider element dispatches a native revslider:change event whenever the active slide changes, so you can sync external UI, fire analytics, or lazy-load related content:

document.querySelectorAll('.revslider').forEach((el) => {
  el.addEventListener('revslider:change', (e) => {
    // e.detail = { index, total, sliderId }
    analytics.track('slide_view', e.detail);
  });
});

Other useful hooks include the actions revslider_before_render and revslider_after_render, the filter revslider_image_attributes (customize srcset and sizes per slide), and the browser events revslider:ready and revslider:pause. See the full reference in the developer docs.

Troubleshooting

Most slider issues come down to caching, image sizes, or a script conflict. Work through these first:

  • Slider shows nothing: confirm the shortcode id matches an existing, published slider, and clear any page cache after editing it.
  • Slides don't move: usually a JavaScript error from another plugin. Open the browser console, fix the offending error, or temporarily disable other plugins to isolate it.
  • Images look blurry: upload source images at roughly twice the slider's display width so the responsive srcset has a sharp candidate for retina screens.
  • Layout jumps on load: make sure you set an aspect ratio on the slider and aren't overriding the slide height with custom CSS that removes the reserved space.
  • Swipe feels too sensitive: raise the swipe threshold under Autoplay & touch, especially when the slider sits inside another scrollable area.

Tip: If a transition stutters on a low-powered device, switch from a transform-heavy preset like Flip to Fade or Zoom fade, which are the lightest for the browser to paint.

FAQ

Frequently asked questions

No. Build as many sliders as you like, each with as many slides as you need. Sliders are stored as a custom post type, so the only practical limit is your hosting.

Yes. The markup is static HTML and the behavior is a small inline script, so full-page caching and a CDN serve sliders perfectly. There's nothing dynamic per request to bust the cache.

It does. The front-end runtime is vanilla JavaScript built on Pointer Events and CSS transforms. Even on a theme that has removed jQuery, your sliders keep working.

Image slides are core. A background video per slide is available on a licensed plan, with the same lazy-loading and reduced-motion safeguards as images, the video pauses for visitors who prefer reduced motion.

No. The core builder, slides and captions, the main motion presets, touch and swipe, lazy images, and full accessibility are all free. A license adds the extra presets, caption animations, video slides, and updates.

Was this helpful?

Browse the rest of the documentation or see what is included in each plan.

Back to all docs