Image Comparison

The Image Comparison widget allows you to interactively showcase the differences between two images. By using a slider, visitors can seamlessly compare the “before” and “after” states of a product, design, or any visual transformation. It’s a powerful tool for presenting visual changes, such as renovations, retouching, or progress over time, directly on your web page!

View Live Demo

Content Tab

Items

Before Label: Enter the label for the 'Before' image.
Before Image: Upload or select the 'Before' image from the media library.
After Label: Enter the label for the 'After' image.
After Image: Upload or select the 'After' image from the media library.

Settings

Handler Settings
- Divider Starting Position: Adjust the slider to set the initial position of the divider when the comparison view is loaded.
- Prev Arrow Icon: Choose the style of the previous arrow icon.
- Next Arrow Icon: Choose the style of the next arrow icon.
Carousel Settings
- Slides to Show: Set the number of slides to show at once.
- Autoplay: Toggle autoplay on or off for the comparison slider.
- Pause on Hover: Enable to pause autoplay when the mouse hovers over the slider.
- Autoplay Speed: Adjust the speed of autoplay in milliseconds.
- Effect: Choose between 'Slide' or 'Fade' for transition effects.
- Animation Speed: Set the speed of the transition animation.
- Show Arrows Navigation: Toggle to show or hide arrow navigation.
- Show Dots Navigation: Toggle to show or hide dot navigation.

Style Tab

General

Padding: Set the padding around the Image Comparison widget to create space within the borders. You can define the padding value for the top, right, bottom, and left sides individually or link them together for a uniform padding by clicking the chain icon.
Border Type: Choose the type of border you want around the Image Comparison widget. Options include none, solid, double, dotted, dashed, and grooved.
Border Radius: Adjust the radius of the widget's corners to create rounded edges. You can set different radius values for the top-right, top-left, bottom-right, and bottom-left corners.
Box Shadow: Apply a shadow effect to the Image Comparison widget. You can customize the shadow's properties such as blur radius, spread, color, and position.

Label

Before/After: Input fields where you can type the text for the labels that appear on the images.
Horizontal Alignment: Align the label text horizontally within the Image Comparison widget.
Vertical Alignment: Align the label text vertically within the Image Comparison widget.
Color: Select the color for the label text.
Typography: Access font settings for the label text, including font family, size, weight, transform, style, decoration, line height, and letter spacing.
Background Type: Choose a background for the label, either classic (a solid color or image) or gradient.
Margin: Define the space outside the label's boundary. You can set different margins for top, right, bottom, and left.
Padding: Set the padding inside the label to create space around the text. This can be set individually for top, right, bottom, and left.

Handle

Alignment: Align the slider handle vertically within the Image Comparison widget.
Control Width: Adjust the width of the slider handle control.
Height: Set the height of the slider handle.
Margin: Define the outer space around the handle.
Border Radius: Adjust the roundedness of the handle's corners.
Background Type: Choose a solid or gradient background for the handle.
Arrow Color: Select the color of the arrow inside the handle.
Box Shadow: Apply a shadow to the handle.
Handle Divider: Customize the divider within the handle by adjusting the width and color.
Divider Width: Set the thickness of the handle's divider.
Divider Color: Choose a color for the divider.
Arrow Size: Adjust the size of the arrows within the handle.
Margin: Set the margin around the handle's arrow.

Carousel Arrows

Normal/Hover: Switch between normal and hover states to style the carousel arrows for each state.
Arrows Style: Access additional styling options for the carousel arrows.
Prev Arrow Position: Adjust the previous arrow's position vertically and horizontally, and set the indentation from the top and left sides.
Next Arrow Position: Adjust the next arrow's position vertically and horizontally, and set the indentation from the top and right sides.

Carousel Dots

Normal/Hover/Active: Switch between normal, hover, and active states to style the carousel dots for each state.
Dots Style: Access additional styling options for the dots.
Alignment: Align the dots horizontally within the carousel.
Gap: Set the space between the dots.
Dots Box Margin: Define the margin around the dots box. You can adjust the top, right, bottom, and left margins.