# Slideshow

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&#x26;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&#x26;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&#x26;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&#x26;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&#x26;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&#x26;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&#x26;token=5a8ab22f-b4a5-42bc-ae23-aa6d526fbafb" alt=""><figcaption><p><strong>Slideshow Section settings</strong></p></figcaption></figure>
