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

# Slideshow

Story's hero-style slideshow section with support for mobile and desktop devices

Showcase your brand and products with Story's powerful slideshow section. Customize your slides to promote products on both mobile and desktop devices.

<figure><img src="https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FhOGgkYmL67HJmqQr8Oqb%2FStory%20slideshow%20first%20image%20alternate.jpg?alt=media&amp;token=603378d0-60df-40ac-973c-bab7ad4d3efd" alt=""><figcaption></figcaption></figure>

### Mobile image

Portrait images can be used for mobile devices. Each slide can have a different mobile image:

<figure><img src="https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FnYUH8HZ9L2lrmwLtmhkL%2FMobile%20image%20option%20slideshow.jpg?alt=media&amp;token=d135ad84-28cd-4034-b491-3d947a7e29bf" alt=""><figcaption></figcaption></figure>

### Modern design elements

Creative design options built-in. Simply add section padding to the top and width for a modern rounded style banner:

<figure><img src="https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2F2SYRr5eXVYrqMQrUovjZ%2Fuse%20full%20width%20padding%20for%20rounded%20effect.jpg?alt=media&amp;token=34b9908f-b6d5-4446-8c76-d5b79d8cb279" alt=""><figcaption><p><strong>Slideshow Section settings</strong></p></figcaption></figure>

For the modern rounded effect:

1. Set the slideshow section spacing width to **Full width padding**.
2. Use the **Rounded** option under Rounded images in the Theme settings -> Layout

<figure><img src="https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FgY0TqOhWawNDrmDZ26nI%2FTheme%20settings%20layout%20rounded%20corners.jpg?alt=media&amp;token=5925986d-6894-488f-8311-6454dfb66ee1" alt=""><figcaption><p><strong>Theme settings</strong></p></figcaption></figure>

For images without rounding, set the section width option to **Full width**:

<figure><img src="https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FjpvMs8DA932b7Sjm3rpm%2FSlide%20block%20settings%20desktop%20image.jpg?alt=media&amp;token=f61318e1-decb-43fa-b9e6-45685fde30a5" alt=""><figcaption></figcaption></figure>

### Transparent header

Blend your slideshow images into the header area with the transparent header feature:

<figure><img src="https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FtDXRcl1EOYKCJKIe9NJV%2FTransparent%20header%20Story%20slideshow.jpg?alt=media&amp;token=2a98330d-4363-4bee-8d6c-b4fa3d333292" alt=""><figcaption><p><strong>Header settings</strong></p></figcaption></figure>

1. Enable with the checkbox in the Header settings under Transparent header.
2. Add an alternate logo that works best for the transparent header effect. In our example, we have a white Alternate logo and the standard header logo is black (header settings).
3. In the Slideshow section settings, use the **Full width** option for the transparent effect to work.

<figure><img src="https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2F941BRQ98gGlFoh2sxt40%2FStory%20settings%20for%20transparent%20header.jpg?alt=media&amp;token=5a8ab22f-b4a5-42bc-ae23-aa6d526fbafb" alt=""><figcaption><p><strong>Slideshow Section settings</strong></p></figcaption></figure>
