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

# Slideshow: Pagination

Show a full-width image or video slideshow with named, clickable slide labels and progress lines along the bottom.

{% hint style="warning" %}
**Pro feature.** This section requires a Pro or Max License key. Without one, it's hidden on your live store and shows a 🔒 Pro notice in the theme editor. [Learn about plans and License keys](/articles/general-information/license-key-and-plans.md)
{% endhint %}

***

The **Slideshow: Pagination** section is a slideshow where each slide has its own label (for example "1. New arrivals", "2. Best sellers") shown along the bottom of the slideshow. Shoppers can click a label to jump to that slide, and a line under the active label fills up to show progress. Each slide can use an image or a video and has its own text and button.

### 1. Our guide to set up a Slideshow: Pagination section:

{% hint style="info" %}
**Steps:**

* In the theme editor, click **Add section.**
* Locate **Slideshow: Pagination.**
* Click **Save.**
  {% endhint %}

### 2. Section settings

* **Layout:** Full width / Compact. Compact keeps the slideshow within the page width.
* **Auto-rotate slides:** Moves to the next slide automatically while the slideshow is on screen.
* **Change slides every:** Time between slides, 3–9 seconds. Shown when **Auto-rotate slides** is on.
* **Pagination**
  * **Number the labels:** Adds a number in front of each label (1., 2., 3.…).
  * **Label alignment:** Text alignment of each label above its line: Left / Center.
  * **Pagination color:** Color of the labels, lines and mobile arrows.
* **Media**
  * **Desktop slide height:** Adapt to first image / Small / Medium / Large / Custom.
  * **Desktop custom height:** Slide height on desktop, 250–850px. Shown when **Desktop slide height** is set to Custom.
  * **Mobile slide height:** 350px / 450px / 550px / 650px / 750px.
* **Corner radius**
  * **Media:** Rounds the corners of the slideshow, 0–40px.
* **Accessibility**
  * **Slideshow description:** Describes the slideshow for screen readers.

### 3. Slide block settings

Each **Slide** block is one slide and one label in the pagination. You can add up to 4 slides.

* **Pagination label:** The label shown for this slide in the pagination row.
* **Media**
  * **Media type:** Image / Video.
  * **Image:** The slide image. Shown when **Media type** is Image.
  * **Mobile image:** Optional image used on mobile. If empty, the main image is used.
  * **Image focal point:** Which part of the image stays visible when it's cropped: Center / Top / Bottom / Left / Right.
  * **Video:** The slide video, played muted and on loop. Shown when **Media type** is Video.
  * **Mobile video:** Optional video used on mobile. If empty, the main video is used.
  * **Media link:** Makes the whole slide clickable. Only used when the slide has no button label.
  * **Media overlay opacity:** Darkens the image or video so text stays readable, 0–100%.
* **Content**
  * **Caption:** Small text shown above the heading.
  * **Heading:** The slide's main title.
  * **Heading size:** 15–80px.
  * **Description:** Text shown below the heading.
  * **Content position:** Where the text sits on desktop: Top left / Top center / Top right / Middle left / Middle center / Middle right / Bottom left / Bottom center / Bottom right.
  * **Content alignment:** Text alignment on desktop: Left / Center / Right.
* **Button**
  * **Button label:** Text on the button. Leave empty to hide the button.
  * **Button link:** Where the button goes.
  * **Use outline button style:** Shows an outline button instead of a solid one.
* **Colors**
  * **Heading:** Color of the heading.
  * **Text:** Color of the caption and description.
  * **Button label:** Text color of the solid button.
  * **Button background:** Background color of the solid button.
* **Mobile**
  * **Mobile content position:** Top / Middle / Bottom.
  * **Mobile content alignment:** Left / Center / Right.

### 4. Tips

* Keep pagination labels short (one to three words) so they fit side by side on desktop.
* On mobile, only the active slide's label is shown, with previous and next arrows beside it.
* Use landscape images at least 2000px wide for full-width slides, and add a portrait **Mobile image** for better cropping on phones.
* Videos only play while the slideshow is on screen. Keep them short and compressed for faster loading.