# Slider

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2Fw09xuNXSCYfkTk2JIRy9%2Fs_slider.png?alt=media&#x26;token=1f217f5a-5843-49c6-925b-c5d2075edc26" alt=""><figcaption></figcaption></figure>

This block is designed to create visually engaging homepage presentations or hero sections with flexible layout, animation, and responsive positioning options.\
You can configure both the general slider behavior and the design of each individual slide.\
The following table lists all available options in the order provided.

**Location:** `Sections -> Templates -> Banners → Slider`

***

## Slider - Options Overview

| **Option**                                                                | **Description**                                                                                                                                                                                                 |
| ------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Layout**                                                                | Defines the general layout appearance and structure of the banner slider.                                                                                                                                       |
| **Top spacing: None, Small, Medium, Normal**                              | Sets vertical spacing above the slider. Use *None* to align tightly with other sections or *Medium/Normal* for more breathing space.                                                                            |
| **Width: Default, Boxed, Wide, Fullwidth**                                | Controls how wide the slider spans across the page. *Wide* works best for screens of **1440 px** and larger. *Fullwidth* stretches edge-to-edge, while *Boxed* keeps content centered within a fixed container. |
| **Height: Auto, Landscape 4:3, Landscape 16:9, Fixed, Fullheight**        | Defines the height of the main image or video on desktop. *Fixed* and *Fullheight* apply only to desktop view (screens wider than 577 px).                                                                      |
| **Desktop fixed height (200–1000 px)**                                    | Allows setting a custom fixed pixel height for the desktop version when *Height* is set to *Fixed*.                                                                                                             |
| **Height mobile: Auto, Landscape 4:3, Landscape 16:9, Fixed, Fullheight** | Adjusts banner height for mobile screens. Values *Fixed* and *Fullheight* apply to larger mobile devices (width above 1024 px).                                                                                 |
| **Mobile fixed height (200–1000 px)**                                     | Defines custom fixed height for mobile devices when the *Height mobile* option is set to *Fixed*.                                                                                                               |
| **Logo**                                                                  | Group of options related to displaying a logo on top of the slider.                                                                                                                                             |
| **Show logo**                                                             | Enables or hides the logo on the banner slider.                                                                                                                                                                 |
| **SVG code**                                                              | Allows inserting a logo as vector (SVG) code instead of an image. The SVG must include `width` and `height` attributes for proper display.                                                                      |
| **Logo width (10–100%)**                                                  | Controls the proportional width of the logo inside the banner.                                                                                                                                                  |
| **Desktop X (0–100%) / Desktop Y (0–100%)**                               | Positions the logo horizontally (X) and vertically (Y) on desktop screens.                                                                                                                                      |
| **Tablet X (0–100%) / Tablet Y (0–100%)**                                 | Sets the logo position for tablet devices.                                                                                                                                                                      |
| **Mobile X (0–100%) / Mobile Y (0–100%)**                                 | Defines the logo position for mobile screens to ensure correct alignment and visibility.                                                                                                                        |
| **Slider settings**                                                       | Controls animation and navigation behavior of the slider.                                                                                                                                                       |
| **Transition effect: Slide, Fade, Flip**                                  | Determines how slides change during transitions. *Slide* moves horizontally, *Fade* crossfades between slides, and *Flip* rotates for a 3D look.                                                                |
| **Image parallax**                                                        | Adds a parallax scrolling effect to images for dynamic depth while sliding.                                                                                                                                     |
| **Enable autoplay**                                                       | Automatically cycles through slides at the set interval.                                                                                                                                                        |
| **Change slides every**                                                   | Specifies the time interval for autoplay transitions (in seconds). Does not function inside the theme editor; preview live to test.                                                                             |
| **Desktop navigation: Disable, Dots, Arrows, Dots and arrows**            | Defines navigation controls visible on desktop. Choose from dots, arrows, both, or none.                                                                                                                        |
| **Dots alignment**                                                        | Sets the alignment of navigation dots (left, center, or right).                                                                                                                                                 |
| **Arrows alignment**                                                      | Controls the horizontal or vertical position of navigation arrows on desktop.                                                                                                                                   |
| **Mobile navigation: Disable, Dots, Arrows, Dots and arrows**             | Controls navigation type on mobile devices for better user interaction.                                                                                                                                         |
| **Dividing line → Show**                                                  | Displays a separating line between slides or between the banner slider and adjacent sections.                                                                                                                   |
| **Colors → Base / Accent / Lines**                                        | Defines color settings for the dividing line or other decorative slider elements. *Base* controls background color, *Accent* and *Lines* affect highlights and borders.                                         |
| **Media button**                                                          | Styling controls for video or media play buttons displayed over the slide.                                                                                                                                      |
| **Background**                                                            | Sets the button background color in default state.                                                                                                                                                              |
| **Icon**                                                                  | Adjusts the icon color inside the button.                                                                                                                                                                       |
| **Background hover**                                                      | Changes the button background color when hovered.                                                                                                                                                               |
| **Icon hover**                                                            | Sets the icon color on hover interaction.                                                                                                                                                                       |
| **Slider dots**                                                           | Controls color appearance of navigation dots.                                                                                                                                                                   |

## Slider Item Options (Slide-Specific Settings)

| **Option**                                                                  | **Description**                                                                                           |
| --------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- |
| **Type: Image / Video**                                                     | Defines whether the slide contains a static image or a video background.                                  |
| **Image**                                                                   | Uploads the main banner image used for the slide.                                                         |
| **Image alignment: Top / Center / Bottom**                                  | Positions the image within its container vertically.                                                      |
| **Image overlay opacity**                                                   | Adds a transparent color overlay to darken or lighten the image background, improving text readability.   |
| **Content**                                                                 | Content area of the slide (text, headings, button).                                                       |
| **Link**                                                                    | Adds a clickable link for the entire slide or button. Can point to collections, products, or custom URLs. |
| **Heading**                                                                 | Main title text displayed on the banner.                                                                  |
| **Description**                                                             | Additional supporting text shown below or above the heading.                                              |
| **Heading after description**                                               | Changes order of elements — displays the heading below the description.                                   |
| **Button**                                                                  | Adds a call-to-action button linking to a chosen page or product.                                         |
| **Settings**                                                                | Control typography and responsive positioning of text.                                                    |
| **Heading size / Heading size tablet / Heading size mobile**                | Defines text size for different devices to maintain readability.                                          |
| **Underline on hover**                                                      | Adds an underline animation when the text or button is hovered.                                           |
| **Desktop X / Desktop Y / Tablet X / Tablet Y / Mobile X / Mobile Y**       | Positions text block coordinates for each device, allowing full responsive alignment.                     |
| **Text align: Left / Center / Right**                                       | Defines horizontal alignment of text elements.                                                            |
| **Description width / Description width tablet / Description width mobile** | Controls maximum width of description text on various devices.                                            |
| **Show text box**                                                           | Displays a background box behind text to improve contrast with images.                                    |
| **Countdown → Show countdown**                                              | Adds a countdown timer to the slide, useful for sales or limited-time events.                             |
| **Colors**                                                                  | Controls color appearance for each content element.                                                       |
| **Heading / Heading hover**                                                 | Sets text color for heading and its hover state.                                                          |
| **Description / Description hover**                                         | Defines description text color and hover state.                                                           |
| **Countdown**                                                               | Sets countdown text color.                                                                                |
| **Button**                                                                  | Controls button text and background color.                                                                |
| **Show background**                                                         | Enables a background area behind the text and button.                                                     |
| **Background / Background gradient**                                        | Sets solid color or gradient background for the text box.                                                 |
| **Border / Text**                                                           | Defines border and text colors for content areas.                                                         |
| **Show background on hover**                                                | Adds a hover background effect for the text area or button.                                               |
| **Background hover / Background gradient hover**                            | Controls hover background and gradient colors.                                                            |
| **Border hover / Text hover**                                               | Defines hover styles for borders and text.                                                                |
| **Enable shadow**                                                           | Adds drop shadow to the content box or text for better separation from the background.                    |
| **Shadow / Shadow hover**                                                   | Defines shadow color and intensity for normal and hover states.                                           |
| **Box → Background / Background hover**                                     | Controls background appearance of the content container.                                                  |
| **Other → Image overlay color**                                             | Sets overlay color applied over the slide image or video to enhance contrast for text.                    |
