Sleek Compare: The Lightweight WordPress Before & After Image Comparison Slider Plugin
Add beautiful before/after image sliders to your WordPress site in seconds. Zero dependencies, under 10KB, perfect Core Web Vitals. Works with Gutenberg, Elementor, and any page builder.
WordPress Image Comparison Slider Features
Ultra Lightweight WordPress Plugin
Under 10KB total (JS + CSS). No jQuery, no FontAwesome, no bloat. Your WordPress site stays fast with this image comparison slider.
Mobile Friendly
Full touch/swipe support with optimized 48px touch targets. Works great on all devices.
Lazy Loading
Images and slider initialization deferred until visible. Perfect Core Web Vitals scores.
Accessible
Full keyboard navigation with arrow keys. ARIA attributes for screen readers.
WordPress Page Builder Integrations
Native Gutenberg block, Elementor widget, and shortcode. This before/after slider plugin works with any WordPress page builder.
Customizable
CSS variables for easy theming. Customize colors, sizes, and labels without code.
How Sleek Compare Works
Three steps to add before/after image sliders to any WordPress page. No code, no configuration files, no developer needed.
Add the Block or Widget
Open the Gutenberg editor and search for "Sleek Compare," or drag the Elementor widget into your layout. If you use a different builder, paste the shortcode [sleek_compare] anywhere.
Upload Your Images
Select a "before" and "after" image from your media library. Set optional labels, starting position, and orientation (horizontal or vertical in Pro). The block preview updates live.
Publish
Hit publish. The slider loads only on that page, initializes when scrolled into view, and weighs under 10KB. Your visitors drag, swipe, or use arrow keys to compare the images.
Performance & Technical Specs
Built for speed from day one. Every byte is accounted for.
| Total bundle size | 8.4 KB (JS + CSS, minified and gzipped) |
| External dependencies | Zero. No jQuery, no libraries. |
| Initialization | IntersectionObserver defers until slider is visible |
| Image loading | Native lazy loading via loading="lazy" |
| Render impact | No layout shift (explicit width/height on images) |
| Core Web Vitals | 0ms CLS, <50ms INP, no LCP impact |
| WordPress versions | 5.8+ (tested up to 6.7) |
| PHP versions | 7.4, 8.0, 8.1, 8.2, 8.3 |
| Accessibility | WCAG 2.1 AA. Keyboard arrows, ARIA roles, 48px touch targets |
| RTL support | Yes, auto-detected from WordPress locale |
| Integrations | Gutenberg block, Elementor widget (Pro), shortcode |
Quick Comparison: WordPress Before/After Plugins
How Sleek Compare stacks up against the most-installed alternatives on feature-for-feature basics.
| Feature | Sleek Compare | Twenty20 | BEAF Pro | Image Comparison Block |
|---|---|---|---|---|
| Bundle size | <10 KB | ~85 KB | ~120 KB | ~45 KB |
| jQuery required | No | Yes | Yes | No |
| Gutenberg block | Yes | No | No | Yes |
| Elementor widget | Yes (Pro) | No | Yes | No |
| Keyboard accessible | Yes | No | No | Partial |
| Lazy loading | Yes | No | No | No |
| Vertical orientation | Yes (Pro) | No | Yes | Yes |
| Custom labels | Yes (Pro) | No | Yes | Yes |
| Pricing | $29 one-time | Free | $39/yr | $29/yr |
| Last updated | 2026 | 2024 | 2025 | 2025 |
WordPress Before/After Slider Use Cases
How Sleek Compare Stacks Up
See how Sleek Compare compares to other WordPress before/after image slider plugins on performance, accessibility, and value.
Sleek Compare vs BEAF
Feature-heavy gallery plugin with jQuery dependency. More options, bigger footprint.
Sleek Compare vs WP Before After
Video comparison support and multiple styles, but relies on external libraries.
Sleek Compare vs The Plus Addons
Part of a 120+ widget Elementor bundle. Deep integration, but Elementor-only.
Sleek Compare vs Twenty20
Popular veteran plugin with 20,000+ installs. jQuery-dependent, no Gutenberg block, last updated a year ago.
Sleek Compare vs Image Comparison Block
Gutenberg-native competitor by bPlugins. Nice customization, but iPhone lag reports and Freemius subscription model.
Before/After Sliders by Industry
See how professionals in your industry use Sleek Compare to showcase transformations and win more clients.
Real Estate
Staging reveals, renovation before/afters, and seasonal property shots that help agents win listings.
Fitness & Training
Client transformation showcases that build trust and convert prospects into members.
Dental & Medical
Showcase treatment results for whitening, veneers, dermatology, and more. Build patient confidence.
Photography & Retouching
Show your editing skills with side-by-side before/after comparisons in your portfolio.
Home Renovation
Kitchen remodels, bathroom makeovers, exterior transformations. Show clients what you can do.
Frequently Asked Questions
Does Sleek Compare work with Elementor?
Yes. Sleek Compare includes a native Elementor widget that you can drag and drop into any Elementor layout. It also works with the Gutenberg block editor and as a shortcode, so it's compatible with any WordPress page builder including Beaver Builder, Divi, and WPBakery.
How big is the plugin? Will it slow down my site?
Sleek Compare is under 10KB total (JavaScript + CSS combined). It has zero dependencies -- no jQuery, no FontAwesome, no external libraries. It loads only on pages where you use it and defers initialization until the slider is visible on screen. This means virtually zero impact on your page load speed and Core Web Vitals scores.
Does it work on mobile devices?
Yes. Sleek Compare has full touch and swipe support with optimized 48px touch targets that meet mobile accessibility standards. It works on phones, tablets, and desktop browsers. The slider is fully responsive and adapts to any screen size.
Do I need to know how to code?
No coding required. Use the Gutenberg block or Elementor widget to add sliders visually. If you prefer, there's also a shortcode you can paste into any text editor. For developers who want deeper customization, CSS variables let you restyle everything without touching PHP.
Is Sleek Compare accessible for screen readers?
Yes. The slider includes full keyboard navigation with arrow keys and proper ARIA attributes for screen readers. It meets WCAG 2.1 AA accessibility standards, making it safe to use on sites that need to comply with accessibility regulations.
What WordPress versions are supported?
Sleek Compare requires WordPress 5.8 or higher and PHP 7.4 or higher. It's tested with the latest WordPress releases and works with both classic and block themes.
What's the difference between the Free and Pro versions?
The free version on WordPress.org includes the core before/after slider with Gutenberg block, shortcode support, keyboard accessibility, and lazy loading. The Pro version ($29 one-time) adds the Elementor widget, vertical slider orientation, custom labels, starting position control, and priority email support. See the pricing page for a full feature comparison.
Is it a one-time purchase or a subscription?
One-time purchase. Pay $29 once and you get lifetime updates and support. No recurring fees, no annual renewals.
Add a Before/After Image Slider to WordPress Today
Install Sleek Compare and start showing stunning image comparisons on your WordPress site in minutes. One plugin, zero bloat.