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)
