Adding new slider

While in the WordPress’s block editor type “/super block slider” to create a new slider.

Main slider settings

  • Initial selected slide
    First slide to show when the slider load.
  • Transition animation speed
    In seconds or milliseconds. e.g. 1.5s, 1500ms.
  • Transition animation
    Speed curve of the transition.
  • Autoplay
    Auto rotate to next slide.
  • Autoplay timing
    Interval between slides. In seconds or milliseconds. e.g. 1.5s, 1500ms.
  • Loop slides
    Infinite loop slides.
  • Pause mouse over
    Pause when mouse cursor is over slider.
  • Show arrows
    Visibility of previous and next arrows.
  • Slider indicator
    Type of indicator.
    • None
      Don’t show indicator.
    • Dots
      Dots indicator.
    • Titles
      Title indicator.
  • Navigation color
    Color of arrows, dots, and titles.
  • Height of slider
    Control the slider height.
  • Width of slider
    Control the slider width.

Single slider settings

  • Main settings button
    Quick access to the main slider settings.
  • Responsive options
    Set custom background image for desktop, tablet, mobile.
  • Set focus
    sets background center point.
  • Background size
    Controls how the background image is sized.
    • Auto:
    • Contain: constrained within slide.
    • Cover: stretched to cover the slide.
    • Fill: stretched + constrained
  • Enable lazy load
    start loading background image when visible on screen. (Recommend keeping this disabled)
  • Content vertical alignment
    • Default: inherit from theme vertical alignment.
    • Center: vertical align center.
    • Bottom: vertical align bottom.
  • Content overflow
    Control how the content behaves when there is not enough space.
  • Background overlay
    • Solid background color
      overlay the slide with solid color.
    • Gradient background color
      overlay the slide with gradient color.
      • Linear, apply a linear gradient.
      • Radial, apply a radial gradient.
    • Overlay opacity
      control the opacity of overlay.
  • Slide link
    Add URL link to slide.
  • Parallax background
    Add parallax effect to background image


The Super block slider can be added using a shortcode.

  1. Create a new slider.
  2. Design your slides.
  3. Use the shortcode provided at the top of the editor to insert into your page, post or other editors.
Example: [superblockslider id="123"]

Note: Super Block Slider can be inserted directly in the block editor.

Developers CSS class

There are two animating class added to the slides when the slider is animating. These classes can be use to trigger your custom CSS or Javascript animations.

superblockslider__slide--animating-in, superblockslider__slide--animating-out

Super block slider

Easy to use, lightweight slider block for WordPress.