Before After Carousel - WordPress Gutenberg Block

A WordPress Gutenberg block that displays before/after image comparisons in a responsive carousel.

Features

• Server-Side Rendering: Future-proof with PHP-based rendering
• Responsive Carousel: Works like Owl Carousel with customizable items per view
• Before/After Slider: Uses TwentyTwenty plugin for smooth image comparison
• Fully Customizable:
  • Set items per desktop, tablet, and mobile
  • Adjustable spacing between items
  • Enable/disable navigation arrows
  • Enable/disable dot navigation
  • Multiple before/after image pairs
• Touch-Friendly: Swipe support for mobile devices

Installation

1. Upload the before-after-carousel folder to /wp-content/plugins/
2. Navigate to the plugin directory:

   cd wp-content/plugins/before-after-carousel

3. Install dependencies:

   npm install

4. Build the block:

   npm run build

5. Activate the plugin through the WordPress admin panel

Development

Build Commands

• npm run start - Start development mode with watch
• npm run build - Build for production
• npm run format - Format JavaScript files
• npm run lint:js - Lint JavaScript files
• npm run lint:css - Lint CSS files

Usage

1. Add the "Before After Carousel" block in the Gutenberg editor
2. Configure carousel settings in the block sidebar:
   • Items per Desktop/Tablet/Mobile
   • Spacing between items
   • Navigation arrows visibility
   • Dots visibility
3. Add before/after image pairs in the "Before/After Items" panel
4. Upload before and after images for each item
5. Customize labels (optional)

File Structure

before-after-carousel/
├── assets/
│   ├── css/
│   │   ├── frontend.css
│   │   └── twentytwenty.css
│   └── js/
│       ├── frontend.js
│       ├── jquery.event.move.js
│       └── jquery.twentytwenty.js
├── build/
│   ├── block.json
│   ├── index.js
│   ├── index.css
│   └── index.asset.php
├── src/
│   ├── index.js
│   └── index.css
├── before-after-carousel.php
├── package.json
└── README.md

Requirements

• WordPress 5.8+
• PHP 7.4+
• Node.js 14+ (for development)

Credits

• Based on ZURB's TwentyTwenty for before/after comparison
• Carousel functionality inspired by Owl Carousel

License

GPL-2.0+

Support

For issues and feature requests, please contact the plugin author.