MARKETPLACE
PLUGINS
BEFORE/AFTER IMAGE
Before/After Image logo

Before/After Image

Published January 2025
   •    Updated September 2025

Plugin details

Before/After Image brings an intuitive and visually engaging way to compare two images side-by-side with a slider. This plugin allows users to interactively slide between two images for a seamless comparison, perfect for showcasing transformations, design iterations, or any before-and-after scenarios. You can tailor the experience to fit your app's design and functionality with customizable labels, orientations, and slider modes. Whether for photo edits, progress showcases, or visual storytelling, this plugin adds a dynamic and impactful touch to your application.
🔗Demo Link: https://chakor-plugin-demo-6.bubbleapps.io/version-test/before_after_image
🔗Editor Link: https://bubble.io/page?id=chakor-plugin-demo-6&test_plugin=1735635285697x857913237187854300_current&tab=Design&name=before_after_image&type=page

Our team is available to solve any problems or questions you may have, please open a thread on our support forum: https://forum.thechakor.com/t/plugin-issues

$20

One time  •  Or  $4/mo

stars   •   0 ratings
2 installs  
This plugin does not collect or track your personal data.

Platform

Web

Contributor details

Chakor logo
Chakor
Joined 2021   •   371 Plugins
View contributor profile

Instructions

🔹Install the Before/After Image Plugin. 🔹These plugin offers the following features:
         🔸Set Before and After Images: Add the two images you want to compare.
         🔸Orientation Selection: Choose between horizontal or vertical slider orientation.
         🔸Default Offset Setting: Define how much of the "before" image is visible when the page loads.
         🔸Overlay Labels: Enable or disable overlay labels, and customize the text for "Before" and "After" labels.
         🔸Interactive Slider Movement Modes:
                  ● Move on Mouse Hover: The slider moves as the user hovers over it.
                  ● Move with Handle Only: The slider moves when dragging the handle.
                  ● Click to Move: The slider moves to the exact position where the user clicks.

🔗Demo Link: https://chakor-plugin-demo-6.bubbleapps.io/version-test/before_after_image
🔗Editor Link: https://bubble.io/page?id=chakor-plugin-demo-6&test_plugin=1735635285697x857913237187854300_current&tab=Design&name=before_after_image&type=page

Types

This plugin can be found under the following types:

Categories

This plugin can be found under the following categories:
Image   •   Productivity   •   Media   •   Visual Elements

Resources

Support contact
Documentation
Tutorial

Rating and reviews

No reviews yet

This plugin has not received any reviews.
Bubble