Before/After Image

đŸ”—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

Description:

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.

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.

Was this article helpful?

0 out of 0 liked this article