Documentation

Image Comparison Slider

 

The Image Comparison Slider Module allows users to compare two images by sliding between them. This often showcases differences between a before and after state, such as renovations, makeup transformations, or product comparisons.

Image Comparison Slider

What is the Image Comparison Slider Module?

The Image Comparison Slider Module for HubSpot is a custom module designed to allow users to visually compare two images (such as "before" and "after" images) by sliding a comparison slider back and forth. This type of module is especially useful in scenarios like product transformations, image galleries, or before-and-after visuals, where users can interactively explore differences between two images. The module enables an intuitive user experience, often used in marketing or design-related websites.

Is the Image Comparison Slider Module responsive and mobile-friendly?

Absolutely! The Image Comparison Slider Module is built with responsiveness in mind, ensuring that it seamlessly adapts to different screen sizes and devices. Whether your visitors are accessing your website from a desktop computer, tablet, or smartphone, they will have a smooth and consistent viewing experience

How does the Image comparison slider module work?

The core interaction is based on a slider that the user can drag back and forth (horizontally) depending on the configuration. Users can adjust the slider to reveal portions of two images, such as a "before" and "after" scenario.

What customization styles options are available with the Image comparison slider Module?

below list of customization style options are available for Image comparison slider Module.

title_img

User can add the title in respective title tab.

title

User can show and hide the title to click the checkbox.

before_imgusers can add the before image in this respective tab.

after_img

users can add the after image in this respective tab.

image_lay_style

users can customize the image layout styles such as border and corner radius

image_width

User can resize the image width using image width tab maximum until 100%.

 

filter_style-1

User can change the image background color using filter option tab maximum 100%.

button_line_style

User can change button and slider line styles such as background color and border.

arrow_style-1

User can change the arrow icons color.

button_style

User can select/unselect the enable disable button and slider line using checkbox.

title_style-1

User can customize the title styles such as font,color,alignment and spacing.

How can I get support?

If you're still having trouble or have any questions or feedback, contact at  hello@amwhiz.com

Image Comparison Slider Module for HubSpot | Documentation