> For the complete documentation index, see [llms.txt](https://oranthemes.gitbook.io/edge-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/edge-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/leyQGwS4vnazeIW7FjRU" 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/fvKzB0pivN5QPwafSqco" alt=""><figcaption></figcaption></figure>

* **Section width** -  Boxed / Wide / Full
* **Desktop height mode ⇒** Adapt to image/ Full screen / Fixed height
* **Desktop fixed height ⇒** Height applied when 'Fixed height' is selected
* **Mobile height mode ⇒** Adapt to image/ Full screen / Fixed height
* **Mobile fixed height ⇒** Height applied when 'Fixed height' is selected
* **Auto-rotate slides**&#x20;
* **Change slides every**
* **Pause auto rotate on hover**
* **Transition type** -  Zoom  /  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/yh6Ba40a4Ct0Nm9MgC5c" 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/w9qobRUaldXiLv6tRRrX" alt=""><figcaption></figcaption></figure>

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

### Layout & Content

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

* **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 ⇒**  `use [f] and [/f] to highlight the text`
* Highlighted word type ⇒ Single line / Multiple lines
* **Heading size** - From Heading Xl - Heading 6
* **Description** - Small / Medium / Large

### Colors

<figure><img src="/files/2zRXv9yEM7RWhxuWKsdl" alt=""><figcaption></figcaption></figure>

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

### Buttons

<figure><img src="/files/Zr1i7FyDoNLtt74z1ls6" 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