# Slideshow

The slideshow section is a dynamic module designed to showcase multiple **images** or **videos**, allowing for automatic or manual slide transitions. It is ideal for visually appealing areas on the homepage or product pages, effectively enhancing the user experience and conveying content visually.

### Basic Settings

* **Enable Full Width**: When enabled, the slideshow will display across the full width of the page.
* **Slideshow Height**:
  * **Auto**: The height of the slideshow adjusts automatically based on content.
  * **Small**: Sets a small height for the slideshow.
  * **Medium**: Sets a medium height for the slideshow.
  * **Large**: Sets a large height for the slideshow.
* **Adapt to Transparent Header**: If the header has a transparent background, enabling this option will add padding at the top to prevent content overlap.

#### Carousel Settings

* **Enable Autoplay**: Automatically loops the slideshow when enabled.
* **Autoplay Speed**: Use the slider to set the interval of the slideshow, measured in seconds.
* **Show Navigation Buttons (Desktop)**: When enabled, navigation buttons will appear on desktop.
* **Show Pagination Dots**: Displays pagination dots indicating the current slide.
* **Navigation & Pagination Colors**: Customize the color of navigation buttons and pagination dots.

#### SEO Optimization

* **Set as Main Content in Above-the-Fold Area**: When enabled, the slideshow is considered the primary content area of the page, which helps improve SEO scores by optimizing the template accordingly.

#### Image Settings (For Image Slide)

* **Image**: Upload or select an image to display in the slideshow.
* **Image Overlay Opacity**: Adjust the transparency of the image overlay using a slider, ranging from 0% to 100%.

#### Video Settings (For Video Slide)

* **Video**: Upload or select a video to display in the slideshow.
* **Video Overlay Opacity**: Adjust the transparency of the video overlay using a slider, ranging from 0% to 100%.

#### Content Settings

* **Color Scheme**: Choose the color scheme for the content in the slideshow.
* **Position**: Set the position of the content (e.g., “Bottom Center”).

#### Text Alignment

* **Text Alignment**: Choose how the text is aligned within the slide: left-aligned, centered, or right-aligned.

#### Caption

* **Caption**: Add a brief caption.

#### Heading

* **Heading**: Enter the heading for the slideshow.
* **Heading Size**: Set the size of the heading (small, medium, large).
* **Decorative Heading**: When enabled, the heading will use a [decorative font](/global-settings/typography.md).

#### Description

* **Description**: Enter a detailed description for the slideshow content.

#### Button Settings

* **Button Text**: Enter the text to be displayed on the button.
* **Button Link**: Set the URL to which the button will redirect users. This can be an internal or external link.
* **Button Style**:
  * **Primary**: The button will appear in the primary style.
  * **Secondary**: The button will appear in the secondary style.
* **Show Button Arrow**: When enabled, an arrow icon will appear on the button.

#### Mobile Settings

* **Image**: Upload or select a separate image for mobile devices to ensure the slideshow displays optimally on smaller screens.


---

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