Image comparison banner

The image comparison banner is used to display two different images, allowing users to compare the differences between them by sliding. This feature is ideal for showcasing "before and after" effects, such as product upgrades, renovations, or cleaning results.

Configuration Options:

1. Enable Full Width

   • Purpose: When enabled, the banner will occupy the full width of the page, providing a more impactful visual effect.

2. Image Height

   • Purpose: Set the height of the banner image in pixels to adjust the visual size of the banner.

3. Comparison Direction

   • Purpose: Choose the direction of image comparison.

     • Horizontal Comparison: Slide left and right to compare images.

     • Vertical Comparison: Slide up and down to compare images.

Before Settings:

1. Before Image:

   • Usage: Upload or select the image for the "before" comparison. This image will appear on one side of the slider.

2. Before Title:

   • Usage: Add a title for the "before" image, such as "Before."

   • Title Color: Set the title color to ensure it is clearly visible on the image.

After Settings

1. After Image:

   • Usage: Upload or select the image for the "after" comparison. This image will appear on the other side of the slider.

2. After Title:

   • Usage: Add a title for the "after" image, such as "After."

   • Title Color: Set the title color to ensure it is clearly visible on the image.

Usage Notes:

• Image Selection: Ensure that the uploaded images have the same resolution and aspect ratio for the best comparison effect.

• Title Color: When selecting the title color, it is recommended to choose a color that contrasts with the image background to enhance readability.

Common Issues:

1. Comparison Slider Not Working: Ensure the images are correctly uploaded and that the browser supports the related functionality.

2. Title Not Clear: You may need to adjust the title color or choose more suitable images.