loader image

Xpertcodes – Where Expertise Meets Innovation | Code | Consult | Expert

Simple Slider for Elementor (Xpert) – Hero, Video & Flex Slider Widgets

Every great website needs a stunning hero section. But building one in Elementor usually means:

  • ✅ Using multiple widgets stacked together

  • ✅ Adding custom CSS for animations

  • ✅ Installing separate plugins for video backgrounds

  • ✅ Hours of trial and error

Xpert Simple Slider Addon for Elementor solves this. It gives you two powerful slider widgets that handle hero images, video backgrounds, animated content, and Flex-based slides — all inside Elementor.

Two Widgets, One Plugin

1. Xpert Simple Slider (Hero & Video Slider)

Feature What It Does
Image Slider Full-width hero slides with smooth transitions
Video Slider YouTube or self-hosted video backgrounds
Animated Headings Typed/sequential text animations
Scroll Anchor Arrow that scrolls to next section
Overlay Effects Color overlays + pattern overlays
Responsive Heights Different heights for desktop, tablet, mobile

2. Xpert Flex Slider (Animated Content Slider)

Feature What It Does
FlexSlider Core Reliable, touch-ready slider engine
Animated Elements Title, subtitle, description with per-slide animations
Decorative Shapes Up to 5 shapes per slide with independent animation
Navigation Controls Arrows + dots with full styling
Autoplay Control Speed/duration settings
Button Repeater Multiple CTA buttons per slide

What You Can Build

1. Hero Image Slider

  • Xpert Simple Slider

  • Image slider mode

  • Custom height with overlay

  • Animated title, subtitle, description

  • CTA button

  • Scroll anchor arrow

2. Video Hero Section

  • Xpert Simple Slider

  • Video slider mode

  • YouTube video background

  • Text overlay with animation

  • No need for separate video plugins

3. Marketing Slider with Animated Headings

  • Xpert Simple Slider

  • Prefix/suffix text controls

  • Animated title list (typed.js)

  • Perfect for SaaS or agency sites

4. Testimonial or Showcase Slider

  • Xpert Flex Slider

  • Autoplay enabled

  • Animated title/subtitle/description

  • Styled navigation arrows

5. Decorative Landing Page Slider

  • Xpert Flex Slider

  • Up to 5 shapes per slide

  • Independent size, position, z-index

  • Animation + delay per shape

6. Responsive Banner Slider

  • Either widget

  • Different heights for desktop/tablet/mobile

  • Works on any device

Key Features Breakdown

Simple Slider Controls

Control Options
Slide Style Image slider or Video slider
Height Mode Full height or Custom height
Custom Height Desktop, Tablet, Mobile (separate values)
Effects Transition effects
Delay Slide duration
Overlay Color overlay + Pattern overlay
Content Position Top alignment with offset
Container Width Content area width control

Scroll Anchor Arrow

Control Options
Enable/Disable On/Off
Icon Choose from Elementor icons
Size Font size control
Color Custom color picker
Arrow Style Different visual styles
Effect Animation on hover
Target ID CSS ID to scroll to

Flex Slider Controls

Control Options
Height Desktop, Tablet, Mobile
Background Effect Transition effect
Autoplay On/Off with duration
Content Container Width control
Per-Slide Elements Image, overlay, title, subtitle, description
Per-Element Animations Effect + delay per element

Decorative Shapes (Flex Slider)

Control Options
Shape Image Upload custom shape/images
Position X/Y offsets
Size Width/Height
Z-Index Layer order
Animation Entrance effect
Delay Animation timing

Button Repeater (Both Widgets)

Each slide can have multiple buttons with:

  • Title – Button text

  • Icon – With SVG width control

  • Icon Position – Left or right of text

  • Icon Spacing – Gap between icon and text

  • URL – Link destination

  • Animation – Entrance effect + delay (Flex Slider)

  • Typography – Font controls

  • Padding, Margin, Border – Full styling

  • Colors – Normal and hover states

Styling Controls

Global Text Styling

  • Alignment – Left, center, right

  • Colors – Title, subtitle, description

  • Typography – Font size, family, weight

  • Spacing – Margins and widths

Prefix/Suffix Controls (Simple Slider)

  • Prefix Text – Appears before animated title

  • Suffix Text – Appears after animated title

  • Colors – Separate from main title

  • Spacing – Control gap between prefix/title/suffix

Navigation Styling (Flex Slider)

Element Controls
Arrows Icon choice, size, width/height, position, colors, hover colors
Dots Border radius, width/height, position, background color, active color

Asset Loading Optimization

One of the smartest features: assets only load when needed.

The plugin:

  1. Scans the page for slider widgets before enqueuing

  2. Uses Elementor document data for accurate detection

  3. Loads assets only on pages with sliders

  4. Enqueues editor assets only in Elementor preview

  5. Has a global “disable assets” toggle in settings

This means:

  • ⚡ Faster page loads

  • 📉 Lower CPU usage

  • 💨 Better Core Web Vitals

Default Settings Page

Settings → Xpert Simple Slider gives you one clean option:

Setting Options Default
Enable Slider Assets On/Off On

Turn it off if you want to manually enqueue assets or use a different slider solution.

Requirements

Requirement Minimum
WordPress 6.0+
PHP 7.4+ (recommended 8.0+)
Elementor 3.0.0+ (free version works)

Performance & Compatibility

Feature Benefit
Legacy Widget Registration Works with older Elementor versions
Try/Catch Registration Prevents fatal errors
AJAX Error Suppression Clean admin experience
WP_DEBUG Logging Easy troubleshooting
SVG Icon Support Custom icons via Elementor Icon Manager

Limitations (Transparent)

Limitation Why
No shortcode support Focus on Elementor widget experience
No Gutenberg block Elementor-focused plugin
No share counts/analytics Keeping it lightweight
Vendor libraries used Reliable, tested slider engines
Video service compatibility Depends on YTPlayer supported formats

Real-World Examples

SaaS Hero Slider

text
Simple Slider → Image Slides → Overlay → Animated Heading
Prefix: "Build" → Animated: "Faster, Better, Stronger" → Suffix: "with AI"
Description → CTA Button → Scroll Arrow

Agency Portfolio Slider

text
Flex Slider → Image + Overlay → Animated Title → Animated Subtitle
Decorative Shape → CTA Button → Autoplay

E-Commerce Banner Slider

text
Simple Slider → Image Slides → Custom Heights (different per device)
Color Overlay → Promo Text → Button → Scroll Arrow

Frequently Asked Questions

Can I use Xpert Simple Slider with the free version of Elementor?
Yes! Both widgets work with Elementor free.

Do I need to add custom CSS?
No — all styling is built into the widget controls.

What video services are supported?
YouTube is supported via the YTPlayer library.

Does it work with Elementor Pro’s theme builder?
Yes, the widgets work in templates, headers, footers, and theme parts.

Can I disable slider assets for performance?
Yes, use the Settings → Xpert Simple Slider toggle.

What about mobile responsiveness?
Both widgets have dedicated desktop, tablet, and mobile height controls.

Can I use my own icons?
Yes, the Elementor Icon Manager supports custom icons and SVGs.

Why Choose Xpert Simple Slider?

Feature Alternative Solutions
✅ 2 slider widgets in 1 plugin Other plugins charge per widget
✅ Video + Image in same widget Separate widgets usually required
✅ Responsive heights built-in Custom CSS often needed
✅ Scroll anchor included Requires extra plugins
✅ Animated text (typed.js) Separate implementation needed
✅ Decorative shapes Not available elsewhere
✅ Smart asset loading Others load assets everywhere
✅ Modern + Legacy support Works across Elementor versions

Download Xpert Simple Slider

Xpert Simple Slider Addon for Elementor is available on WordPress.org.

[Download from WordPress.org →]

Let’s Work Together

Good for service-based businesses.Have questions or need support? Our team is here to help you every step of the way.