== Before After Slider by Pixelese ==
Contributors: wpartstudio
Donate link: https://www.buymeacoffee.com/wpartstudio
Tags: before after slider, comperison slider
Tested up to: 6.7
Stable Tag: 1.0.0
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html

Before After Slider by Pixelese is an interactive before-and-after image comparisons Plugin.

## Description

Whether you're a photographer showcasing retouching work, a designer highlighting creative transformations, a beauty professional presenting makeover results, or anyone looking to display side-by-side comparisons, this plugin offers a seamless solution.

With its sleek and user-friendly interface, Pixelese Before After Slider allows you to easily upload and configure two images for comparison. Its responsive design ensures the slider looks flawless on all devices, from desktops to smartphones. The plugin features customizable slider handles, smooth transition effects, and multiple layout options, letting you tailor the experience to suit your website's style.
Perfect for photographers, designers, beauty professionals, and anyone who wants to display transformation or comparison images in a stylish and engaging way.

## Features

- **Interactive Slider**: Allows users to slide between two images for a before-and-after view.
- **Responsive Design**: Fully responsive and mobile-friendly for seamless functionality across all devices.
- **Easy to Use**: Add sliders using shortcodes or blocks, no coding required.
- **Customizable**: Adjust the slider’s appearance to match your website’s style.
- **Lightweight**: Optimized for speed and performance.
- **Cross-Browser Compatible**: Works flawlessly on all modern browsers.

## Installation

### Manual Installation

1. Download the plugin ZIP file.
2. Extract the contents.
3. Upload the `before-after-slider-by-pixelese` folder to your `/wp-content/plugins/` directory.
4. Activate the plugin through the **Plugins** menu in WordPress.

### Install via WordPress Dashboard

1. Go to `Plugins > Add New`.
2. Search for **Before After Slider by Pixelese**.
3. Click `Install Now` and then `Activate`.

## Usage

### Adding a Before After Slider

1. **Using Shortcodes**:
   - Add the shortcode `[before_after_slider id="123"]` where `123` is the slider ID.
   - You can find the slider ID in the slider settings.

2. **Using Gutenberg Block**:
   - In the Gutenberg editor, search for the "Before After Slider by Pixelese" block.
   - Add your images and configure the slider settings directly in the block editor.

3. **Using Widgets**:
   - Navigate to `Appearance > Widgets`.
   - Add the "Before After Slider" widget to your desired widget area.

### Configuration

- Upload a "before" image and an "after" image in the slider settings.
- Customize options such as:
  - Slider orientation (horizontal/vertical).
  - Overlay text for "Before" and "After" labels.
  - Default slider position.
  - Styling options (e.g., colors, fonts, and handle styles).

### Can I use multiple sliders on the same page?
Yes, you can add multiple sliders to a single page or post using their unique IDs.

### Is the plugin compatible with page builders?
Absolutely! The plugin works seamlessly with Gutenberg, Elementor, Divi, and other popular page builders.

== Frequently Asked Questions ==

= Where can I find the unminified source files? =
The unminified JavaScript and CSS files are included in the /assets/js/ and /assets/css/ directories.

= External Libraries Used =
This plugin uses the BeerSlider library. You can find the original source code here:
[https://github.com/pehaa/BeerSlider](https://github.com/pehaa/BeerSlider)


## Changelog

### 1.0.0
- Initial release.
- Core features include creating and displaying interactive before-after sliders.

## Contributing

We welcome contributions from the community! If you find a bug, have a feature request, or want to contribute code, please fork the repository and submit a pull request. Don’t forget to include relevant tests and documentation.

## License

This plugin is licensed under the GPL v2 or later. See the [LICENSE](LICENSE) file for more details.