Motion Slider

Motion Slider – User Documentation

Version: 1.1
Author: Drummer Boy Media
Compatibility: WordPress 5.0+, WPBakery Page Builder, Elementor, Gutenberg

Overview

Motion Slider is a powerful, responsive slider plugin that works seamlessly across three major WordPress page builders: WPBakery Page Builder, Elementor, and Gutenberg. Create stunning image sliders with advanced features like video backgrounds, global content layers, multiple transition effects, and comprehensive responsive controls.

Key Features

  • Multi-Platform Support – Works with WPBakery, Elementor, and Gutenberg
  • Video Backgrounds – YouTube and Vimeo support
  • Global Content Layer – Persistent content across all slides
  • Multiple Transition Effects – Fade, Slide, Ken Burns
  • Responsive Design – Separate height controls for desktop, tablet, mobile
  • Advanced Navigation – Arrows, dots, auto-rotation with customizable styles
  • Image Captions – Display media library captions below slides
  • Multiple Buttons – Add multiple call-to-action buttons per slide
  • Content Alignment – Left, center, right text alignment options
  • Touch/Swipe Support – Mobile-friendly navigation
  • Slide Disable Functionality – Toggle slides on/off without deleting them
  • Container-Based Responsive Layout – Better responsive behavior in narrow containers
  • iOS Video Fallback – Automatic fallback for iOS devices where video autoplay fails
  • Enhanced HTML Formatting – Support for images and class attributes in content

Platform Support

Motion Slider provides a consistent experience across all supported platforms while respecting each platform’s unique interface patterns.

WPBakery Page Builder

  • Access via: Content Elements → Motion Slider
  • Interface: Tabbed settings with grouped controls
  • Features: Full feature set with param groups for slides and buttons

Elementor

  • Access via: Widget Panel → Motion Slider (under General category)
  • Interface: Elementor-native controls with live preview
  • Features: Complete feature parity with conditional controls

Gutenberg

  • Access via: Block Inserter → Motion Slider (Media category)
  • Interface: Block editor with sidebar controls
  • Features: Full functionality with WordPress-native components

Getting Started

Creating Your First Slider

  1. Add the Element/Block
    Insert Motion Slider element in your preferred page builder. The slider starts with no slides – you’ll add them next.
  2. Add Your First Slide
    Click “Add Slide” button, upload a background image from your media library, add a title and description text, optionally add call-to-action buttons.
  3. Configure Basic Settings
    Set slider height for different devices, choose transition effect (Fade, Slide, or Ken Burns), enable/disable navigation arrows and dots.
  4. Preview and Publish
    Preview your slider on the frontend and adjust settings as needed.

Quick Setup Checklist

  1. Add at least one slide with background image
  2. Set appropriate heights for desktop/tablet/mobile
  3. Choose transition effect
  4. Configure navigation preferences
  5. Test on different screen sizes

Key Features

Video Backgrounds

Replace slide background images with YouTube or Vimeo videos for dynamic, engaging sliders.

  • Supported Platforms: YouTube and Vimeo with auto-play, muting, and looping
  • Setup: Simply paste the full video URL and enable video background
  • Content Overlay: Use either individual slide content or global content layer
  • iOS Fallback: Automatic fallback to first slide’s background image on iOS devices

Global Content Layer

Display consistent content across all slides, perfect for company branding, persistent call-to-action, or promotional content.

  • Global Title: Main heading displayed on all slides
  • Global Text: Supporting text content with HTML formatting support
  • Global Buttons: Call-to-action buttons with individual link settings
  • Content Alignment: Left, center, or right alignment options

Advanced Navigation

Arrow Styles

  • White Circle: Semi-transparent white background with dark arrow
  • Dark Circle: Semi-transparent dark background with light arrow
  • Arrow Only: Large, semi-transparent arrows with no background

Navigation Options

  • Auto-Rotation: Configurable timing with manual override
  • Dot Navigation: Click any dot to jump to that slide
  • Touch/Swipe: Mobile-friendly gesture support
  • Hide Until Hover: Arrows only appear when hovering over slider

Responsive Design

Motion Slider provides granular control over appearance across different screen sizes with container-based responsive behavior.

  • Height Controls: Set specific heights for desktop (1024px+), tablet (768px-1023px), and mobile (767px and below)
  • Container-Based Layout: Responsive behavior based on slider width instead of viewport for better narrow container support
  • Mobile Optimizations: Simplified navigation, optimized image loading, touch targets, and scroll hints
  • Automatic Adjustments: Content scaling, navigation repositioning, and font size adjustments

HTML Formatting Support

Both titles and text content support basic HTML formatting for enhanced styling and functionality.

For Titles

  • <a href=""> – Links with href, title, target, rel, class attributes
  • <strong>, <b> – Bold text
  • <em>, <i> – Italic text
  • <sup>, <sub> – Superscript and subscript
  • <span> – Inline styling with class and style attributes
  • <br> – Line breaks

For Text Content

Includes all title tags plus:

  • <p> – Paragraphs with class attribute
  • <ul>, <ol> – Lists with class attributes
  • <li> – List items with class attribute
  • <img> – Images with src, alt, title, class, style, width, height attributes

Example Usage

<!-- Title examples -->
<strong>Bold Title</strong> with <em>emphasis</em>
Visit <a href="https://example.com" class="cta-link">our website</a>
H<sub>2</sub>O or E=mc<sup>2</sup>

<!-- Text examples -->
<p class="intro-text">This is a paragraph with <strong>bold</strong> and <em>italic</em> text.</p>
<ul class="feature-list">
  <li class="feature-item">First bullet point</li>
  <li class="feature-item">Second bullet point</li>
</ul>

<!-- Image example (advanced users) -->
<img src="/wp-content/uploads/logo.png" alt="Company Logo" class="slide-logo" style="width: 150px; height: auto;">

Security Note: All HTML is sanitized for security. Only the tags listed above are allowed.

Best Practices

Content Strategy

  • Keep text concise – Users scan quickly
  • Use high contrast – Ensure readability over images
  • Limit slides – 3-5 slides for optimal engagement
  • Clear call-to-action – Make buttons obvious and compelling

Image Guidelines

  • Recommended size: 1920x1080px or larger
  • File format: JPG for photos, PNG for graphics
  • File size: Under 500KB recommended
  • Consistent style – Use similar image treatments

Performance Tips

  • Optimize images before upload
  • Use appropriate image dimensions
  • Limit number of slides (5-7 maximum for best performance)
  • Test on mobile devices
  • Use simpler transitions on mobile
  • Keep video file sizes reasonable

Browser Compatibility

Supported Browsers

  • Chrome 60+
  • Firefox 55+
  • Safari 12+
  • Edge 79+

Known Limitations

  • Video backgrounds may not autoplay on iOS Safari (automatic fallback provided)
  • Ken Burns effect requires modern CSS support
  • Touch gestures require touch-enabled devices

Motion Slider v1.1 – Created by Drummer Boy Media