> For the complete documentation index, see [llms.txt](https://oranthemes.gitbook.io/nimbus-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://oranthemes.gitbook.io/nimbus-theme/theme-sections/slideshow.md).

# Slideshow

The "Slideshow" section features rotating images or content, capturing attention and showcasing key messages, promotions, or products. It enhances visual appeal and engages visitors, encouraging them to explore further.

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

{% hint style="success" %}
**Steps:**&#x20;

1. In the theme editor **(Customize)**, click **Add section.**
2. Locate **Slideshow.**
3. Make necessary changes. > **Save.**
   {% endhint %}

## General Settings

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

* **Section width** -  Container / Stretched / Full width&#x20;
* **Desktop height** - Adapt to image /  450px / 550px / 650px / 750px /  Full screen&#x20;
* **Mobile height** - Adapt to image / 400px / 450px / 500px / 550px / Full screen&#x20;
* **Auto-rotate slides**&#x20;
* **Change slides every**
* **Transition type** -  Zoom / Zoom cut /  Fade / Slide&#x20;
* **Controls** - Filled arrows / Outlined arrows / Numbers / Dots
* **Slideshow description** - Slideshow about our brand Describe the slideshow for customers using screen readers.

## Block settings

{% hint style="success" %}
Steps:

1. Locate **Slideshow.**
2. **Add Slide**
3. Make necessary changes. > **Save.**
   {% endhint %}

<figure><img src="/files/0PwhpgA84ZzUFdC5xifz" alt=""><figcaption></figcaption></figure>

* **Image** - 2800 x 1000 .jpg recommended
* **Mobile image** - 1200 x 1600 .jpg recommended
* **Slide link** - Link on image

### Video

<figure><img src="/files/70BuwIzxNgfD06Cvia5G" alt=""><figcaption></figcaption></figure>

* **Use video as a background** - When enable Video overwite Image slide
* **Shopify-hosted video**

### Content

<div><figure><img src="/files/ZXmE3xSXWTURZZsR00bX" alt=""><figcaption></figcaption></figure> <figure><img src="/files/VzwNfq17Oq5ACyo5rv6W" alt=""><figcaption></figcaption></figure></div>

* **Content maximum width**
* **Content position**
  * Top left&#x20;
  * Top center&#x20;
  * Top right&#x20;
  * Middle left&#x20;
  * Middle center&#x20;
  * Middle right&#x20;
  * Bottom left&#x20;
  * Bottom center&#x20;
  * Bottom right
* **Mobile content position**&#x20;
  * Top left&#x20;
  * Top center&#x20;
  * Top right&#x20;
  * Middle left&#x20;
  * Middle center&#x20;
  * Middle right&#x20;
  * Bottom left&#x20;
  * Bottom center&#x20;
  * Bottom right
* **Content space** - Small / Normal / Large
* **Subheading**
* **Heading**
* **Heading size** - From Heading 1 - Heading 6
* **Description** - Small / Medium / Large

### Colors

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

* **Text color**
* **Overlay**&#x20;
* **Overlay opacity**
* **Overlay gradient** -  If overlay gradient is blank Overlay will use overlay color

### Buttons

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

#### Button 1, Button 2

* **Label button** - Leave the label blank to hide the button.
* **Link**
* **Button type**
  * Primary
  * Outline
  * Underlined
  * Solid White
  * Outline White
  * Underlined White
  * Secondary