Sleek Compare

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)