WP Manifestindependent plugin directory
manifest / builders / mf-wp-slider

MF Slider

A lightweight (~12KB, no jQuery) hero slider for WordPress with image, YouTube and Vimeo slides — built for WPBakery, designed to stay fast.

by MF · github.com/siracel/mf-wp-slider · website

★ 0stars
0forks

Install

No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:

wp plugin install https://github.com/siracel/mf-wp-slider/archive/refs/heads/main.zip

Readme

MF Slider

🇬🇧 English · 🇹🇷 Türkçe

A fast, dependency-free hero slider for WordPress. MF Slider mixes image, YouTube and Vimeo slides in a single, elegant block and stays under ~12 KB with no jQuery. Videos use a lazy click-to-play facade so the player only loads when needed, and muted background videos can auto-play once and advance to the next slide on their own — without looping.

  • Plugin URI: https://mfdsgn.com
  • Version: 1.8.1
  • License: GPL-2.0+
  • Requires: WordPress (WPBakery optional)

✨ Features

  • Image, YouTube & Vimeo slides in one slider
  • Lazy video loading (facade) for top performance — players load only on demand
  • Muted auto-play videos that play once, then advance (no forced loop)
  • Cover mode — fill the frame with no black bars on the sides
  • Per-slide display duration
  • Full-width and full-height (100svh) options
  • Top gradient overlay to keep a transparent header / white logo readable
  • Smooth fade or slide transitions with optional Ken Burns
  • Inherits your theme's heading & body fonts automatically
  • Native WPBakery element + shortcode
  • Fully responsive, accessible, and reduced-motion friendly

📦 Installation

  1. Copy the mf-wp-slider folder into wp-content/plugins/.
  2. Activate MF Slider from Plugins in the WordPress admin.
  3. Add the slider via the WPBakery element "MF Slider" or the [mf_slider] shortcode.

🚀 Usage

WPBakery

Add the MF Slider element, then build your slides in the Slides param group. Each slide supports a type (Image / YouTube / Vimeo), poster image, heading, subheading, button, alignment, and a per-slide duration.

Shortcode

[mf_slider fullwidth="true" fullheight="true" transition="fade"]

When using the shortcode directly, pass slides as a URL-encoded JSON array via the slides attribute:

[mf_slider slides="%5B%7B%22slide_type%22%3A%22image%22%2C%22image%22%3A%22https%3A%2F%2Fexample.com%2Fhero.jpg%22%2C%22heading%22%3A%22Welcome%22%7D%5D"]

💡 In practice the WPBakery editor builds this JSON for you — the shortcode path is mainly for programmatic use.

⚙️ Shortcode Attributes

Attribute Default Description
height 560 Desktop height. A bare number → px; units allowed (80vh, 100svh).
height_sm 70svh Mobile height. Screen-relative recommended (e.g. 70svh).
fullwidth false Break out of the theme container to full viewport width.
fullheight false Height becomes 100svh; corner radius is reset to 0.
topfade false Top-down black→transparent overlay for header readability.
topfade_height 160 Overlay height in px or % (e.g. 160 or 28%).
topfade_opacity 0.55 Overlay strength, 0–1 (typical 0.4–0.7).
autoplay true Auto-advance slides.
interval 6000 Global slide duration in ms (used when a slide has no own duration). Min 2000.
transition fade fade or slide.
kenburns true Subtle Ken Burns zoom on image slides.
rounded 18 Corner radius in px (ignored when fullheight is on).
slides '' Slide data (param group from WPBakery, or URL-encoded JSON).

🖼️ Per-Slide Fields

Field Values Description
slide_type image · youtube · vimeo Slide type.
image attachment ID or URL Image, or video poster. If empty on a video slide, the thumbnail is fetched automatically.
youtube URL or 11-char ID YouTube source (when slide_type=youtube).
vimeo URL or numeric ID Vimeo source (when slide_type=vimeo). Recommended for brand-free playback.
video_autoplay true Starts muted, plays once, then advances (no loop). Loops only if it's the single slide.
video_cover true Crops a 16:9 video to fill the frame — no side bars. Ideal for auto-play.
heading text Slide title.
subheading text Slide subtitle / description.
btn_text text Button label.
btn_link URL Button link (shown only when both text and link are set).
align left · center · right Caption alignment.
duration seconds This slide's display time. Empty → uses global interval. For auto-play videos, duration = the video length.

🎬 How Video Slides Work

  • Click-to-play (facade): the slide shows a poster + play button. The YouTube/Vimeo player script loads only when the user clicks — keeping initial page weight tiny.
  • Auto-play (muted): with video_autoplay, the video starts muted and plays once, then the slider advances to the next slide. It never force-loops, unless it is the only slide.
  • Cover mode: video_cover crops the 16:9 video to fill the slide area with no black side bars — perfect for muted background-style heroes.
  • Vimeo thumbnails are fetched via the public Vimeo API and cached for 12 hours.

🎨 Theming

All colors are driven by CSS variables, so the slider adapts to any brand. Override them in your theme:

.mf-slider {
  --mfs-accent: #1f6feb;       /* brand accent (buttons, active count) */
  --mfs-accent-ink: #ffffff;   /* text on accent */
  --mfs-text: #ffffff;         /* caption text */
}

Heading and body fonts are inherited from your theme automatically (font-family: inherit).

♿ Accessibility

  • Proper role="region" / carousel + slide roles and aria-labels
  • Hidden slides marked with aria-hidden
  • Keyboard-operable navigation and play buttons
  • Respects prefers-reduced-motion

🗂️ File Structure

mf-wp-slider/
├── mf-slider.php          # Plugin bootstrap, shortcode + WPBakery mapping
└── assets/
    ├── mf-slider.css      # Styles (CSS variables, ~9 KB)
    └── mf-slider.js       # Vanilla JS, no jQuery (~7.5 KB)

📄 License

GPL-2.0+ — see the plugin header. Built by MF.

Read the full README on GitHub →