> For the complete documentation index, see [llms.txt](https://mpithemes.gitbook.io/triumph/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mpithemes.gitbook.io/triumph/template/shared-settings/slideshow.md).
# Slideshow
In the '**Type**', choose how your slides appear and transition:
* **Sliding** - Slides move in from the left or right when users click the arrows.
* **Sliding with edges** - Slides move in from the sides, while part of the previous and next slides remains visible. This gives a preview of nearby slides.
* **Fading** - Slides smoothly fade into each other when navigating.
* **Vertical** - Slides move vertically as users scroll down the page, layering over the previous slide.
{% hint style="danger" icon="seal-exclamation" %}
Available for '*Sliding*', '*Fading*', and '*Vertical*' layouts.
{% endhint %}
Choose how wide the slideshow appears using the '**Width**':
* **Default** – Uses the theme’s standard width.
* **Fixed** – Keeps content within a set width.
* **Full** – Expands the section across the entire screen.
When '*Full*' is selected, you can enable '**Fixed content width**':
* **Enabled** – Keeps content centered with margins on large screens.
* **Disabled** – Stretches content across the full width.
{% hint style="danger" icon="seal-exclamation" %}
Available for '*Sliding with edges*'.
{% endhint %}
**Spacing between slides**\
Adds space between slides when enabled.
{% hint style="danger" icon="seal-exclamation" %}
Available for '*Sliding*', '*Sliding with edges*', and '*Fading*'.
{% endhint %}
Use '**Height type**' to control slide height:
* **Fixed** - Set custom heights for different devices:
* Height on desktop: 500–1000 px
* Height on tablet: 400–800 px
* Height on mobile: 300–800 px
* **Full height** - Uses the full screen height.
{% hint style="danger" icon="seal-exclamation" %}
Available for '*Vertical*' layout.
{% endhint %}
**Automatically rotate slides**\
Cycle through slides automatically.
**Slide change interval**\
Sets the speed (3–10 seconds).
***
### Navigation
{% hint style="danger" icon="seal-exclamation" %}
Available for '*Sliding*', '*Sliding with edges*', and '*Fading*'.
{% endhint %}
**Show dots**\
Displays navigation dots (indicators) on the slideshow. Available on all devices.
**Show arrows on desktop**\
Displays navigation arrows on desktop devices. (*Note: Arrows are hidden on mobile*.)
**Position on desktop**
* **Bottom** – Bottom-right corner.
* **Center** – Centered on the left and right sides.
**Dots position (mobile)**
* **Left** – Bottom-left corner (over the image).
* **Center** – Centered below the content.
{% hint style="success" %}
Example: Dots placed on the left.
{% endhint %}
***
### Colors
Customize navigation colors:
* **Navigation button background** – Arrow background color.
* **Navigation button text** – Arrow color.
* **Navigation button hover background** – Arrow background on hover.
* **Navigation button hover text** – Arrow color on hover.
* **Dots** – Color of navigation dots.
