# 3.2. Slider

The **Slider** widget is a tool that allows you to display a series of images, videos, or content in a horizontal or vertical sliding format. This is an effective way to capture users' attention and present a lot of information in a limited space.

<figure><img src="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2FjRKZJOPLda856YooI8LR%2Fimage.png?alt=media&#x26;token=a573e647-c767-42a4-bf5d-26167e9db370" alt=""><figcaption></figcaption></figure>

## **1. Add Slider to the landing page**

* Click on **Widgets** in the sidebar of the editor.
* Select **Slider** from the **Media** section.
* Choose the **Slider** element and drag it onto your landing page.

<figure><img src="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2FzB9SlDQpSFH5eLKWEbLt%2Fimage.png?alt=media&#x26;token=bb2666c8-bf4e-453c-870e-4623cfee278d" alt=""><figcaption></figcaption></figure>

## **2. Slider Editor**

### 2.1. Content Editor

To access the **Content Editor**, click on the **Slider** widget you wish to modify on the screen and select **Content** from the quick settings bar.

<figure><img src="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2FDgSyeVbMgVgQnQfQChdq%2Fimage.png?alt=media&#x26;token=aa2d1aa9-c854-49a8-87d4-e4115e3a541e" alt=""><figcaption></figcaption></figure>

* Click **"+ Add"** to add a new slider element.
* Click and drag to move slider elements.
* Click the icon <img src="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2FutSt9UKnSxbyonXtdnk7%2Fimage.png?alt=media&#x26;token=1f7d3664-e26a-44c9-992d-3c3ca3b8294c" alt="" data-size="line"> on each slide to access settings: Duplicate, Set as default, Rename, Content, Delete.

<figure><img src="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2FuuKCNzW3Plu19QEAzG79%2Fimage.png?alt=media&#x26;token=eb3ccdb3-7aaf-43cf-b39e-e50cf9248771" alt=""><figcaption></figcaption></figure>

### 2.2. Design Editor

To access the **Design Editor**, click on the **Slider** widget you wish to modify on the screen and select **Design** from the quick settings bar.

<figure><img src="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2FHJaUVVs1cBwuaj9kO874%2Fimage.png?alt=media&#x26;token=ad2a3dc2-f118-4876-8bc1-a5190d7c2ec5" alt=""><figcaption></figcaption></figure>

* **Align:** Helps you align the Slideshow within the container, see details [<mark style="color:blue;">**here**</mark>](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/design-editor/align).
* **Sizes:** In the design editor, allows you to adjust the size and position of elements on the website, see details [<mark style="color:blue;">**here**</mark>](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/design-editor/size).
* **Display on:** Allows you to control the display of the Slider on different devices, including Desktop and Mobile.
* **Styles:** Customize the background color and shadow effects for the entire slider or specific slides within it, see details [<mark style="color:blue;">**here**</mark>](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/design-editor/styles).
* **Border:** Allows you to add and customize the border around the Slider, and you can also adjust the border radius, see details [<mark style="color:blue;">**here**</mark>](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/design-editor/border).
* **Slider settings:** Allows you to customize settings related to the display and functionality of the slider.
  * **Transition Direction:** Determines the movement direction of the slides during transitions: left to right, right to left, bottom to top, top to bottom.
  * **Transition Duration:** Adjusts the time for the transition effect between slides.
  * **Perview:** Determines the number of slides displayed simultaneously in the slider's viewport.
  * **Spacing:** Adjusts the spacing between slides.
  * **Infinite loop:** Allows the slider to automatically repeat when it displays the last slide.
  * **Autoplay:** Automatically runs the slider without user interaction.
  * **Time on each item:** Sets the display time for each slide before moving to the next slide (only applies when Autoplay is enabled).
  * **Gap:** Sets the distance between slides in the slider.

<figure><img src="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2FSK9Jr6xiYGk08BZQ1ejW%2Fimage.png?alt=media&#x26;token=b25b1124-8b15-426a-bc7b-88e3e945181c" alt=""><figcaption></figcaption></figure>

* **Thumbnails:** Displays small preview images below or next to the default slider, allowing users to preview and select the slide they want to view.
  * **Enable:** Displays thumbnails in the slideshow.
  * **Perview:** Specifies the number of thumbnails displayed simultaneously in the thumbnail area.
  * **Vertical:** Sets the orientation of thumbnails (vertical or horizontal).
  * **Loop:** Allows thumbnails to loop as users scroll or navigate through them.
  * **Spacing:** Adjusts the gap between thumbnails.
  * **Width:** Adjusts the width of the thumbnails.

<figure><img src="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2FdXRqNddfO41jdTHI1rQU%2Fimage.png?alt=media&#x26;token=fe0a54be-f876-449a-ae11-bafe4cf35b05" alt=""><figcaption></figcaption></figure>

* **Dots:** Help users identify the number of slides and which slide is currently being displayed in the slider.
  * **Enable/Disable:** Allows you to turn the dot indicators on or off. When disabled, the dots will not be shown.
  * **Basic:** Customize general settings for the basic, unselected dot indicators.
    * **Width:** Adjust the width of the dots (unit: px). Increase or decrease the size to fit your design.
    * **Height:** Adjust the height of the dots (unit: px) to ensure balance with the slider's interface.
    * **Background:** Select a background color for the dots. You can use a color palette or input a custom color code.
    * **Border:** Customize the border and corner radius of the dots.
  * **Selected:** Allows customization of general settings for the selected dot indicator.
    * **Background:** Select a background color for the dots. You can use a color palette or input a custom color code.
    * **Border:** Customize the border and corner radius of the dots.

<figure><img src="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2FXwUD9q4i1snYxnv4wtAx%2Fimage.png?alt=media&#x26;token=069e4c9b-facd-4ccc-b520-c7530a25095a" alt=""><figcaption></figcaption></figure>

* **Button:** Enable/disable and customize the navigation buttons (left/right) for the slider.

<figure><img src="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2FEtLzvf5K5J1utfd76ela%2Fimage.png?alt=media&#x26;token=da228ceb-6654-4f2f-b1fc-3c632fd9fd51" alt=""><figcaption></figcaption></figure>

### 2.3. Advanced Editor

To access the **Advanced Editor**, click on the **Slider** you wish to modify on the screen and select **Advanced** from the quick settings bar.

<figure><img src="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2Feua5GA5RkVHlW099GNvG%2Fimage.png?alt=media&#x26;token=6e48eb70-c37a-4fa7-9bc4-b3ad50ee9c07" alt=""><figcaption></figcaption></figure>

* **Animation**: Allows you to add dynamic animations to the widget on your landing page to make it more attractive and lively, see details [**here**](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/advanced-editor/animation).
* **Desktop/Mobile sync design**: Allows you to set synchronization options for the design between desktop and mobile, see details [**here**](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/advanced-editor/desktop-mobile-sync-design).
* **Position type**: Lets you choose the appropriate positioning style to optimize the webpage and provide the best experience for users, see details [**here**](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/advanced-editor/position-type).
* **Custom advance**: Allows you to customize the appearance and behavior of the component using CSS layers and custom CSS code, see details [**here**](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/advanced-editor/custom-advance).