# Before/ After image slider

## General settings

Choose the container type for the section: Default, Full width, or Container box.

Next, provide a heading, subheading, and description for the section. Feel free to leave any field blank if you prefer not to display the content.

You can align the text either to the center or to the left.

<figure><img src="/files/D1dHYnvZggATvsHoQnZl" alt=""><figcaption></figcaption></figure>

## Slider settings

<figure><img src="/files/1P1w6oFwwf2a5gdFV8bk" alt=""><figcaption></figcaption></figure>

The layout settings let you decide whether to have your images slide horizontally or vertically.

Horizontal

<figure><img src="/files/eJ6vfvvoTpSez4yMjGfJ" alt=""><figcaption></figcaption></figure>

Vertical

<figure><img src="/files/bNMigECqxDmuzB9f8Jvf" alt=""><figcaption></figcaption></figure>

## Block settings

You have two image blocks within a Before/After image slider. To enable the slider, you must fill in both blocks.

For each block, you can add an image for desktop/laptop/tablet view, another image for mobile view, and provide a heading for that imag

<figure><img src="/files/sIEhujn7F3xyruqWkSs4" alt=""><figcaption></figcaption></figure>


---

# 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://4sh-templates.gitbook.io/opulent-os2.0/theme-sections/before-after-image-slider.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.