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

# Slideshow

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FQqBlddWdehFkNjRR8wCV%2FScreenshot_138.png?alt=media&amp;token=bcd09d9e-1a6d-44fa-9ab3-1ac4a115641b" alt=""><figcaption></figcaption></figure>

### Section settings <a href="#section-settings" id="section-settings"></a>

#### General settings <a href="#general-setting" id="general-setting"></a>

| Setting                | Description                                                                                                                                                                                                                                                                                                                                                                                                                               |
| ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Section width**      | <p>3 options for container</p><ul><li><strong>Stretch width</strong>: span the section width regardless of screen size.</li><li><strong>Fixed width</strong>: depends on your page content width in <strong>Theme settings</strong> <strong>-></strong> <strong>Layout</strong>.</li><li><strong>Expand full width</strong>: takes up the entire space on the page and it usually resizes itself to fit the size of the screen.</li></ul> |
| **Slide height**       | Customize the height of the slider                                                                                                                                                                                                                                                                                                                                                                                                        |
| **Color scheme**       | Select colors from **Theme settings -> Colors**                                                                                                                                                                                                                                                                                                                                                                                           |
| **Loading background** | Set the background color displayed while the video is loading. This helps improve visual consistency before the video is fully rendered.                                                                                                                                                                                                                                                                                                  |

#### Carousel settings <a href="#settings-for-carousel" id="settings-for-carousel"></a>

| Setting                | Description                                         |
| ---------------------- | --------------------------------------------------- |
| **Show navigation**    | Display the next and back controls for the carousel |
| **Show pagination**    | Display the pagination for the carousel             |
| **Auto-change slide**  | When enabled, the carousel will run automatically   |
| **Change slide every** | The running period of the carousel                  |

#### Section padding <a href="#section-padding" id="section-padding"></a>

| Setting    | Description                                |
| ---------- | ------------------------------------------ |
| **Top**    | Customize the top margin of the section    |
| **Bottom** | Customize the bottom margin of the section |

#### **Block setting**

#### **Image slide**

| Setting                                              | Description                                                                                                                                      |
| ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Image**                                            | Select your desired images to display on desktop ***(1920px x 840px recommended)***                                                              |
| **Mobile image**                                     | Select your desired images to display on mobile ***(390px x 572px recommended)***                                                                |
| **Image overlay opacity**                            | Adjust the visibility of the image                                                                                                               |
| **Highlight text, Subheading, Heading, Description** | Custom title block                                                                                                                               |
| **Select icon**                                      | Select icon for Highlight text                                                                                                                   |
| **Background color**                                 | Background color for Highlight text                                                                                                              |
| **Text color**                                       | Text color for Highlight text                                                                                                                    |
| **Heading size**                                     | The size of heading content                                                                                                                      |
| **Enable heading underline animation**               | Enable heading underline animation                                                                                                               |
| **Underline style**                                  | Select underline style                                                                                                                           |
| **Underline color**                                  | Custom Underline color                                                                                                                           |
| **Button label**                                     | Customize button name, or leave it empty to hide the button                                                                                      |
| **Button link**                                      | The link URL you want to add                                                                                                                     |
| **Type**                                             | <p>The style of the button</p><ul><li><strong>Primary</strong></li><li><strong>Outline</strong></li><li><strong>Link</strong></li></ul>          |
| **Desktop content position**                         | Adjust the content position on desktop                                                                                                           |
| **Content alignment**                                | <p>3 options for the content alignment</p><ul><li><strong>Left</strong></li><li><strong>Center</strong></li><li><strong>Right</strong></li></ul> |
| **Mobile layout/Content position**                   | <p>3 options for the Content position</p><ul><li><strong>Top</strong></li><li><strong>Middle</strong></li><li><strong>Bottom</strong></li></ul>  |
| **Mobile layout/Content alignment**                  | <p>3 options for the content alignment</p><ul><li><strong>Left</strong></li><li><strong>Center</strong></li><li><strong>Right</strong></li></ul> |

#### **Video slide**

| Setting                                              | Description                                                                                                                                      |
| ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Video**                                            | Select your desired videos to display on desktop ***(1920px x 840px recommended)***                                                              |
| **Video mobile**                                     | Select your desired videos to display on mobile ***(390px x 572px recommended)***                                                                |
| **Video overlay opacity**                            | Adjust the visibility of the image                                                                                                               |
| **Highlight text, Subheading, Heading, Description** | Custom title block                                                                                                                               |
| **Select icon**                                      | Select icon for Highlight text                                                                                                                   |
| **Background color**                                 | Background color for Highlight text                                                                                                              |
| **Text color**                                       | Text color for Highlight text                                                                                                                    |
| **Heading size**                                     | The size of heading content                                                                                                                      |
| **Enable heading underline animation**               | Enable heading underline animation                                                                                                               |
| **Underline style**                                  | Select underline style                                                                                                                           |
| **Underline color**                                  | Custom Underline color                                                                                                                           |
| **Button label**                                     | Customize button name, or leave it empty to hide the button                                                                                      |
| **Button link**                                      | The link URL you want to add                                                                                                                     |
| **Type**                                             | <p>The style of the button</p><ul><li><strong>Primary</strong></li><li><strong>Outline</strong></li><li><strong>Link</strong></li></ul>          |
| **Desktop content position**                         | Adjust the content position on desktop                                                                                                           |
| **Content alignment**                                | <p>3 options for the content alignment</p><ul><li><strong>Left</strong></li><li><strong>Center</strong></li><li><strong>Right</strong></li></ul> |
| **Mobile layout/Content position**                   | <p>3 options for the Content position</p><ul><li><strong>Top</strong></li><li><strong>Middle</strong></li><li><strong>Bottom</strong></li></ul>  |
| **Mobile layout/Content alignment**                  | <p>3 options for the content alignment</p><ul><li><strong>Left</strong></li><li><strong>Center</strong></li><li><strong>Right</strong></li></ul> |