# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ascent.webvista.studio/sections/image-comparison-banner.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.