WP Manifestindependent plugin directory
manifest / media / reel-slider

Reel Slider

Wordpress reel slider plugin

by Reel Slider Team · github.com/kokointegrations/reel-slider

★ 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/kokointegrations/reel-slider/archive/refs/heads/main.zip

Readme

WordPress Reel Slider Plugin

An interactive, premium vertical video reels slider and product card carousel plugin designed for WordPress. Ideal for showcasing WooCommerce products, influencer marketing videos, testimonials, and user-generated content (UGC) in a modern, mobile-first design.

🌟 Key Features

  • Horizontal Card Carousel Layout: Displays reels as a beautiful row of 9:16 vertical cards with responsive auto-scrolling, loop cycling, and smart pausing on mouseover.
  • Hover-to-Play Previews: Hovering over carousel cards on desktop plays a smooth, muted video preview.
  • Immersive Reels Modal Viewer: Clicking any card pops up a fullscreen modal displaying an Instagram/TikTok style vertical reels player, snapped directly to the clicked video.
  • Call-to-Action (CTA) Product Links: Embed customized product links (e.g. "Add to Cart") with custom text on both the carousel cards and fullscreen video overlay.
  • Card Design Presets: Assign specific themes directly to each Reel post on upload:
    • Default: Premium boxed look.
    • Minimalist: Clean, compact overlay, hiding author details.
    • Borderless: 100% video frame with no borders or shadows.
    • Golden Glow: Features a pulsing glowing neon border to highlight specific products.
    • Glassmorphism: Backdrop blur overlays for a modern, frosted-glass effect.
  • Visual Card Designer Settings: Configure card widths, heights, gaps, border-radii, translate hover-lift distances, and custom color pickers for buttons/text from a single admin table.
  • Custom Editor Redirection: Intercepts the standard, complex WordPress block/classic editor for Reel posts, redirecting editing requests to our user-friendly, pre-populated settings form.
  • Autoplay & Autoplay Fallbacks: Intelligently handles strict browser autoplay policies. Falls back to muted autoplay automatically to ensure the videos always load playing.
  • Likes, Comments & Shares: Floating engagement buttons featuring browser-cached AJAX likes counters, comments overlays, and native Web Share API support.
  • Global Sound Sync: Muting or unmuting any video toggles sound states simultaneously across all inline sliders and modal players.
  • Gutenberg Block Integration: Easily embed sliders in Gutenberg with custom layout controls.

🚀 Installation

  1. Download or clone the plugin repository into your WordPress plugins directory (wp-content/plugins/reel-slider).
  2. Go to Plugins in your WordPress Admin Dashboard.
  3. Locate Reel Slider and click Activate.

📋 Usage Guide

1. Upload Video & Create Reels

  1. Navigate to Reels > Settings in your admin dashboard.
  2. Click the Upload Video / Create Reel tab.
  3. Enter a title, caption, profile author details, and upload your vertical video (MP4/WebM) and poster image using the standard WordPress Media Library.
  4. Specify CTA Button Text (e.g. Add to Cart) and a CTA Button URL (e.g. product detail link) to link products. Select a Card Design Style preset (Default, Minimalist, Borderless, Glow, Glass).
  5. Click Create Reel Post.

2. Embed on Pages/Posts

You can insert the Reels slider anywhere using shortcodes or the Gutenberg block.

Shortcode Examples:

  • Default Card Carousel: [reel_slider]
  • Vertical Fullpage/Inline Slider: [reel_slider layout="vertical"]
  • Category Filtering: [reel_slider category="shoes" count="5"]

⚙️ Shortcode Parameters Reference

Parameter Description Default Example
layout Layout style (carousel or vertical). carousel layout="vertical"
category Filter reels by category slug. None category="shoes"
count Maximum number of reels to load. 10 count="5"
autoplay Autoplays active videos (true or false). true autoplay="false"
muted Starts video playback muted. true muted="false"
loop Loops active video. true loop="false"
show_profile Displays author avatar and name. true show_profile="false"
show_caption Displays reel description. true show_caption="false"
show_engagement Displays Likes, comments and share actions. true show_engagement="false"

🛠️ Card Design Visual Customizer

Go to Reels > Settings > Card Design to edit the styling variables of the horizontal carousel cards:

  • Dimensions: Custom width (e.g., 220px), height (e.g., 350px), card gaps, and border-radius.
  • Animations: Hover translate-lift distance (e.g. -6px).
  • Color Overrides: Button backgrounds, button text color, and caption description colors.

These styles compile dynamically as scoped CSS variables in the page header, ensuring lightning-fast performance.

📂 File Structure

  • reel-slider.php: Core plugin initializer. Hook definitions and file loading.
  • includes/class-reel-slider-post-type.php: Custom post type (reel) and taxonomy (reel_category) configuration. Custom metadata boxes and AJAX handlers.
  • includes/class-reel-slider-shortcode.php: Parses layout parameters, handles custom styles compilation, and renders HTML templates.
  • includes/class-reel-slider-block.php: Gutenberg block script enqueues and server-side render callbacks.
  • admin/class-reel-slider-admin.php: Options registration, form submissions handling, settings tabs, and Media library hooks.
  • assets/js/frontend.js: Handles hover previews, modal opening/closing, sound synchronization, AJAX engagement updates, and scroll snapping.
  • assets/css/frontend.css: Layout stylesheet for card carousels, responsive sizing, overlays, modals, and design presets.
  • assets/js/admin.js / assets/css/admin.css: Settings tab toggling and Media picker integrations.

📄 License

This project is licensed under the GPL-2.0 License.

Read the full README on GitHub →