Title: Responsive Before After Slider Block by Unique Solution
Author: Hozefa Saleh
Published: <strong>2025年11月13日</strong>
Last modified: 2025年11月19日

---

プラグインを検索

![](https://ps.w.org/unique-before-after-slider/assets/banner-772x250.png?rev=3399205)

このプラグインは **WordPress の最新3回のメジャーリリースに対してテストされていま
せん**。もうメンテナンスやサポートがされていないかもしれず、最新バージョンの WordPress
で使用した場合は互換性の問題が発生する可能性があります。

![](https://ps.w.org/unique-before-after-slider/assets/icon-256x256.png?rev=3399198)

# Responsive Before After Slider Block by Unique Solution

 作者: [Hozefa Saleh](https://profiles.wordpress.org/hozefasmile/)

[ダウンロード](https://downloads.wordpress.org/plugin/unique-before-after-slider.0.1.0.zip)

 * [詳細](https://ja.wordpress.org/plugins/unique-before-after-slider/#description)
 * [レビュー](https://ja.wordpress.org/plugins/unique-before-after-slider/#reviews)
 *  [インストール](https://ja.wordpress.org/plugins/unique-before-after-slider/#installation)
 * [開発](https://ja.wordpress.org/plugins/unique-before-after-slider/#developers)

 [サポート](https://wordpress.org/support/plugin/unique-before-after-slider/)

## 説明

The Before After Slider block allows you to create stunning image comparisons that
engage your visitors. Perfect for showcasing transformations, renovations, product
improvements, or any visual changes over time.

**Key Features:**

 * **Dual Image Upload**: Easy-to-use interface for uploading both “Before” and “
   After” images
 * **Interactive Slider**: Smooth drag-and-drop divider bar for seamless image comparison
 * **Responsive Design**: Automatically adapts between desktop and mobile layouts
 * **Customizable Colors**: Choose your preferred color for the slider divider and
   handle
 * **Touch-Friendly**: Optimized for both mouse and touch interactions
 * **Accessibility Ready**: Built with accessibility best practices in mind

**Desktop Experience:**
 – Vertical divider bar that slides left and right – Reveals
more or less of the “After” image over the “Before” image – Smooth mouse drag interactions

**Mobile Experience:**
 – Automatically switches to horizontal divider bar on screens
under 767px – Up and down sliding motion for touch-friendly interaction – Maintains
smooth performance on mobile devices

Perfect for:
 * Real estate before/after renovations * Photography portfolio comparisons*
Product transformation showcases * Website redesign comparisons * Medical or cosmetic
procedure results * Landscape or architectural changes

### Support

For support and feature requests, please visit our support forum or contact us through
the plugin directory.

## スクリーンショット

[⌊Desktop view showing vertical slider with before/after images⌉⌊Desktop view showing
vertical slider with before/after images⌉[

Desktop view showing vertical slider with before/after images

[⌊Mobile view displaying horizontal slider orientation⌉⌊Mobile view displaying horizontal
slider orientation⌉[

Mobile view displaying horizontal slider orientation

[⌊Block editor interface with image upload placeholders⌉⌊Block editor interface 
with image upload placeholders⌉[

Block editor interface with image upload placeholders

[⌊Inspector controls showing color customization options⌉⌊Inspector controls showing
color customization options⌉[

Inspector controls showing color customization options

## ブロック

このプラグインは1個のブロックを提供します。

 *   Responsive Before After Slider Interactive before and after image comparison
   slider with responsive design.

## インストール

 1. Upload the plugin files to the `/wp-content/plugins/unique-before-after-slider`
    directory, or install the plugin through the WordPress plugins screen directly.
 2. Activate the plugin through the ‘Plugins’ screen in WordPress
 3. Add the “Before After Slider” block to any post or page through the Gutenberg editor
 4. Upload your before and after images
 5. Customize the slider color to match your site’s design

## FAQ

### What image formats are supported?

The block supports all standard WordPress image formats including JPEG, PNG, GIF,
and WebP.

### Can I customize the appearance of the slider?

Yes! You can customize the color of the divider bar and handle through the block
settings in the editor sidebar.

### Does it work on mobile devices?

Absolutely! The block automatically adapts to mobile devices by switching from a
vertical to horizontal slider orientation for optimal touch interaction.

### Is the block accessible?

Yes, the block is built with accessibility in mind and includes proper ARIA labels
and keyboard navigation support.

### Can I use different sized images?

The block automatically handles different image dimensions and will scale them appropriately
while maintaining the comparison functionality.

## 評価

このプラグインにはレビューがありません。

## 貢献者と開発者

Responsive Before After Slider Block by Unique Solution はオープンソースソフトウェア
です。以下の人々がこのプラグインに貢献しています。

貢献者

 *   [ Hozefa Saleh ](https://profiles.wordpress.org/hozefasmile/)

[“Responsive Before After Slider Block by Unique Solution” をあなたの言語に翻訳しましょう。](https://translate.wordpress.org/projects/wp-plugins/unique-before-after-slider)

### 開発に興味がありますか ?

[コードを閲覧](https://plugins.trac.wordpress.org/browser/unique-before-after-slider/)
するか、[SVN リポジトリ](https://plugins.svn.wordpress.org/unique-before-after-slider/)
をチェックするか、[開発ログ](https://plugins.trac.wordpress.org/log/unique-before-after-slider/)
を [RSS](https://plugins.trac.wordpress.org/log/unique-before-after-slider/?limit=100&mode=stop_on_copy&format=rss)
で購読してみてください。

## 変更履歴

#### 0.1.0

 * Initial release
 * Desktop vertical slider functionality
 * Mobile horizontal slider adaptation
 * Color customization options
 * Responsive design implementation
 * Touch and mouse interaction support

## メタ

 *  バージョン **0.1.0**
 *  最終更新日 **11か月前**
 *  有効インストール数 **10未満**
 *  WordPress バージョン ** 6.1またはそれ以降 **
 *  検証済み最新バージョン: **6.8.11**
 *  PHP バージョン ** 7.0またはそれ以降 **
 *  言語
 * [English (US)](https://wordpress.org/plugins/unique-before-after-slider/)
 * タグ
 * [before after](https://ja.wordpress.org/plugins/tags/before-after/)[block](https://ja.wordpress.org/plugins/tags/block/)
   [image comparison](https://ja.wordpress.org/plugins/tags/image-comparison/)[responsive](https://ja.wordpress.org/plugins/tags/responsive/)
   [slider](https://ja.wordpress.org/plugins/tags/slider/)
 *  [詳細を表示](https://ja.wordpress.org/plugins/unique-before-after-slider/advanced/)

## 評価

レビューはまだ送信されていません。

[Your review](https://wordpress.org/support/plugin/unique-before-after-slider/reviews/#new-post)

[すべてのレビューを見る](https://wordpress.org/support/plugin/unique-before-after-slider/reviews/)

## 貢献者

 *   [ Hozefa Saleh ](https://profiles.wordpress.org/hozefasmile/)

## サポート

意見や質問がありますか ?

 [サポートフォーラムを表示](https://wordpress.org/support/plugin/unique-before-after-slider/)