WP Manifestindependent plugin directory
manifest / editor / before-after-carousel

Before After Carousel

A Gutenberg block for displaying before/after image comparisons in a carousel

by Your Name · github.com/agskanchana/before-after-carousel · website

★ 0stars

Install

Download source zip No release zip yet

This is the repository archive. It installs, but the folder name will carry the branch suffix and updates will not flow.

Install straight from GitHub with WP-CLI:

wp plugin install https://github.com/agskanchana/before-after-carousel/archive/refs/heads/main.zip
No built-in updater. New versions won't appear under Dashboard → Updates. Install new releases yourself, or let Git Updater track the repository.
Readme github.com/agskanchana/before-after-carousel ↗

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.