# 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](https://en-ascent.webvista.studio/global-settings/typography).

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