Sleek Compare

plugin banner

A lightweight before and after image comparison slider for WordPress. No dependencies, under 10KB total.

Author:Tim Normington (profile at wordpress.org)
WordPress version required:5.8
WordPress version tested:6.9.4
Plugin version:1.0.1
Added to WordPress repository:17-03-2026
Last updated:26-03-2026
Rating, %:0
Rated by:0
Plugin URI:https://products.tnormington.com/sleek-compar...
Total downloads:196
plugin download
Click to start download

Sleek Compare is a lightweight before/after image comparison slider for WordPress. Built with performance in mind — no jQuery, no FontAwesome, no bloat.

Key Features

  • Ultra-lightweight: Under 10KB total (JS + CSS combined)
  • Zero external dependencies: No jQuery or icon libraries required
  • Touch-friendly: Full swipe support for mobile devices
  • Keyboard accessible: Arrow keys, Shift+Arrow for 10% jumps, Home/End
  • Simple shortcode: Works in classic editor, widgets, and page builders
  • Lazy loading: Images and slider initialization deferred until visible
  • CSS variables: Easy theming without touching code
  • No render-blocking resources: Scripts and styles load conditionally

Pro Version

Want Gutenberg block and Elementor widget support? Check out Sleek Compare Pro for:

  • Native Gutenberg block with live preview
  • Full Elementor widget with style controls
  • Custom handle colors
  • Priority email support
  • Lifetime updates

Usage

Shortcode

Basic usage:
[sleek_compare before=”https://example.com/before.jpg” after=”https://example.com/after.jpg”]

With all options:
[sleek_compare
before=”https://example.com/before.jpg”
after=”https://example.com/after.jpg”
start=”30″
label_before=”Original”
label_after=”Enhanced”
show_labels=”true”
]

Shortcode Attributes

  • before – URL of the before image (required)
  • after – URL of the after image (required)
  • start – Starting position 0-100 (default: 50)
  • label_before – Before label text (default: “Before”)
  • label_after – After label text (default: “After”)
  • show_labels – Show labels true/false (default: true)
Screenshots
FAQ
ChangeLog