=== Before/After Slider ===
Contributors: snehalpancholi
Tags: before after, image comparison, slider, gutenberg, block
Requires at least: 6.2
Tested up to: 6.7
Requires PHP: 8.1
Stable tag: 1.0.0
License: GPL-2.0+
License URI: https://www.gnu.org/licenses/gpl-2.0.html

A native Gutenberg block that reveals the difference between two images using a drag-to-compare slider.

== Description ==

Before/After Slider adds a polished, accessible image comparison block to the WordPress block editor. Drop in two images — a "before" and an "after" — and your visitors can drag a handle left and right to reveal the difference.

**Perfect for:**

* Before/after renovations, makeovers, and restorations
* Design proofs vs. live implementations
* Photo editing and retouching showcases
* Real estate transformations
* Fitness and wellness progress photos

**Key features:**

* Native Gutenberg block — no shortcodes needed
* Drag handle with smooth pointer and touch support
* Configurable initial divider position (0–100 %)
* Optional customisable "Before" / "After" labels
* Keyboard and screen-reader accessible (ARIA slider role)
* Respects `prefers-reduced-motion`
* Zero dependencies — vanilla JS, no jQuery
* Dark-mode aware CSS variables
* Lightweight: < 4 KB combined JS + CSS

== Installation ==

1. Upload the `before-after-slider` folder to `/wp-content/plugins/`.
2. Activate the plugin through **Plugins › Installed Plugins**.
3. Open any post or page in the Block Editor.
4. Search for **"Before/After Slider"** in the block inserter and add it.
5. Upload your Before and After images using the media selectors.
6. Customise the initial divider position and labels in the block sidebar.
7. Publish.

== Frequently Asked Questions ==

= Does this work without a page builder? =

Yes. It is a native Gutenberg block and requires no third-party page builder.

= Will it conflict with my theme? =

The block uses scoped CSS class names (`.bas-*`) and CSS custom properties, which makes conflicts unlikely. If a conflict occurs, you can override the variables in your theme.

= Does the slider work on mobile / touchscreen devices? =

Yes. Touch events are fully supported alongside mouse events.

= Is the slider accessible? =

Yes. The divider element carries `role="slider"`, `aria-valuemin`, `aria-valuemax`, and `aria-valuenow` attributes so screen readers can announce its position. The component is also keyboard-operable via the Tab key and arrow keys.

= Does it support `prefers-reduced-motion`? =

Yes. When the user has requested reduced motion, CSS transitions are disabled. Dragging still works; only the animated smoothing is removed.

= What image sizes are recommended? =

Use identically sized images for the best visual result. The block will display them at 100 % of the container width. Both landscape and portrait orientations work.

= Does uninstalling the plugin delete my content? =

Block attributes are stored in post content. Uninstalling the plugin leaves posts intact, but the slider will no longer render — visitors will see the raw block comment instead. Re-activating the plugin restores the slider immediately.

== Screenshots ==

1. The Before/After Slider block in the Block Editor showing two uploaded images and the inspector controls.
2. The drag handle mid-way through an image comparison on the frontend.
3. The block on a mobile viewport with touch interaction active.

== Changelog ==

= 1.0.0 =
* Initial release.
* Native Gutenberg block with dynamic PHP render callback.
* Drag-to-reveal with mouse and touch support.
* Keyboard-accessible ARIA slider.
* Configurable initial position, custom labels, and label visibility toggle.
* Respects `prefers-reduced-motion`.
* Zero dependencies (no jQuery).

== Upgrade Notice ==

= 1.0.0 =
Initial release. No upgrade steps required.
