---
url: https://gudhub.com/docs/gh-elements/slider/
title: "Slider\n                #"
description: "Slider is a gh element that allows to make a slideshow of images from items. Due to it, the images can be swiped like a slider. This element can be used to disp"
lang: uk
updated: 2026-09-09T09:49:10.237Z
---

# Slider [#](https://gudhub.com/docs/gh-elements/slider/#slider)

**Slider** is a gh-element that allows to make a slideshow of images from items. Due to it, the images can be swiped like a slider.

## Functional Characteristics [#](https://gudhub.com/docs/gh-elements/slider/#functional-characteristics)

This element can be used to display advertising banners or to display products.

## Value Format [#](https://gudhub.com/docs/gh-elements/slider/#value-format)

Slider does not contain any value.

## Element Options [#](https://gudhub.com/docs/gh-elements/slider/#element-options)

Slider settings are consists of three blocks.

### Field Settings [#](https://gudhub.com/docs/gh-elements/slider/#field-settings)

The first block of settings configures the main aspects of the element. It also contains [standard field settings](https://gudhub.com/docs/understanding-gudhub/gh-elements-structure/setting-overview/).

![Settings of slider element](https://bitbucket.org/AAtlas/gudhub-documentation/raw/master/Gh_Elements/gh-elements/slider-field-settings.jpg "Slider field settings")

| Name | Description |
| :-- | :-- |
| Application | allows to select the source application; [details...](#application) |
| Image | allows to select the source field; [details...](#image) |
| Height | allows to set the element height; [details...](#height) |

#### **Application** [#](https://gudhub.com/docs/gh-elements/slider/#application)

This is the application from which all needed data will be taken.

#### **Image** [#](https://gudhub.com/docs/gh-elements/slider/#image)

This function allows to select the field from which images will be taken for slideshow.

#### **Height** [#](https://gudhub.com/docs/gh-elements/slider/#height)

You can set the slider height due to this function. There are seven possible values:

-   64
-   128
-   256
-   384
-   512
-   768
-   1024

### Advanced Settings [#](https://gudhub.com/docs/gh-elements/slider/#advanced-settings)

This group of settings allows you to add a link and an image name to the item image, in addition to the main settings.

![Advanced settings of slider element](https://bitbucket.org/AAtlas/gudhub-documentation/raw/master/Gh_Elements/gh-elements/slider-advanced-settings.jpg "Slider advanced settings")

| Name | Description |
| :-- | :-- |
| Show URL | allows to add link to the image; [details...](#show-url) |
| URL | allows to select the field from which links wil be taken; [details...](#url) |
| Show Text | allows you to show the text associated with the image; [details...](#show-text) |
| Text | allows to select field from which text will be taken; [details...](#text) |

#### **Show URL** [#](https://gudhub.com/docs/gh-elements/slider/#show-url)

This setting allows you to add URLs to images. When a user clicks on an image, he goes to a specific link.

#### **URL** [#](https://gudhub.com/docs/gh-elements/slider/#url)

This is the setting where you have to enter the link which will be used in the slider.

#### **Show Text** [#](https://gudhub.com/docs/gh-elements/slider/#show-text)

This function allows to configure whether any text will appears when user hover his/her cursor over the image in the slider.

#### **Text** [#](https://gudhub.com/docs/gh-elements/slider/#text)

This is the text that will be displayed when user hover his/her cursor over the image in the slider.

### Filter [#](https://gudhub.com/docs/gh-elements/slider/#filter)

This block contains the standard filter element. Due to this, you can customize which items will be displayed by using different filters.

![Filter of the slider element](https://bitbucket.org/AAtlas/gudhub-documentation/raw/master/Gh_Elements/gh-elements/slider-filter.jpg "Slider filter")

## Element Style [#](https://gudhub.com/docs/gh-elements/slider/#element-style)

The slider is the element whose [interpretation types](#interpretation) are more useful for its style than all [other style settings](https://gudhub.com/docs/understanding-gudhub/gh-elements-structure/setting-overview/), which are standard.

![Style of slider element](https://bitbucket.org/AAtlas/gudhub-documentation/raw/master/Gh_Elements/gh-elements/slider-element-style.jpg "Slider element style")

## Data Model [#](https://gudhub.com/docs/gh-elements/slider/#data-model)

The slider data model contains all element settings:

Copy

```json
{
    "data_model": {
        "app_id": "28560",
        "filters_list": [],
        "height": "512",
        "image": {
            "field_id": "671841"
        },
        "interpretation": [],
        "text": {
            "active": 1,
            "field_id": "671831"
        },
        "url": {
            "active": 1,
            "field_id": "679766"
        }
    }
}
```

| Name | Type | Description |
| :-- | :-- | :-- |
| app\_id | `string` | _contains ID of the source application_ |
| filters\_list | `array` | _contains all filters that are applied to the element_ |
| height | `string` | _contains value of height of the slider_ |
| image | `object` | _contains settings of the image for slider_ |
| field\_id | `string` | _contains ID of the field from which images will be taken for slider_ |
| interpretation | `array` | _contains all element interpretation types_ |
| text | `object` | _contains text settings_ |
| active | `boolean` | _shows whether the text will be shown in slider or not_ |
| field\_id | `string` | _contains ID of the from which text will be taken for slider_ |
| url | `object` | _contains URL settings_ |
| active | `boolean` | _shows whether links will be used in slider_ |
| field\_id | `string` | _contains ID of the field which URL will be taken for slider_ |

## Filtration [#](https://gudhub.com/docs/gh-elements/slider/#filtration)

This element cannot be filtered out.

## Interpretation [#](https://gudhub.com/docs/gh-elements/slider/#interpretation)

Both types of slider interpretation display images of items and allows to [follow specific links](#show-url), but they still have few differences:

![Types of slider interpretation](https://bitbucket.org/AAtlas/gudhub-documentation/raw/master/Gh_Elements/gh-elements/slider-interpretation-types.jpg "Slider interpretation types")

### Logos [#](https://gudhub.com/docs/gh-elements/slider/#logos)

The first type of interpretation displays images of items with gaps between them. It also do not allow image names be displayed.

![Logos interpretation type](https://bitbucket.org/AAtlas/gudhub-documentation/raw/master/Gh_Elements/gh-elements/slider-logos.jpg "Slider Logos")

### Projects [#](https://gudhub.com/docs/gh-elements/slider/#projects)

This type displays images without gaps. In addition, when you hover your cursor over any image, it is shaded and [its name](#show-text) is displayed on it.

![Projects interpretation type](https://bitbucket.org/AAtlas/gudhub-documentation/raw/master/Gh_Elements/gh-elements/slider-projects.jpg "Slider Projects")