# Configuration

## Arrow navigation

***

### Layout type

**Field type**:\
Select

**Available values**:\
• Rectangle (default)\
• Square/Circle

**Example value**:\
`Rectangle (default)`

**Path to the configuration**:\
Tab "Content" => Block "Sliders" => Section "Arrow navigation"

**Technical name**:\
`twt-base-slider-controls-style`

{% hint style="info" %}
In the "Shopping Experiences" tab, you can individually configure various sliders.
{% endhint %}

***

### Corner type

**Field type**:\
Select

**Available values**:\
• not rounded\
• rounded corners (default)\
• round corners

**Example value**:\
`rounded corners (default)`

**Path to the configuration**:\
Tab "Content" => Block "Sliders" => Section "Arrow navigation"

**Technical name**:\
`twt-base-slider-controls-corner-type`

{% hint style="info" %}
**rounded corners**\
Uses the configuration "Border radius". ("Layout" > "Layout" > "Border radius")

**round corners**\
Uses a predefined radius for round corners.
{% endhint %}

***

### Hover effect

**Field type**:\
Select

**Available values**:\
• no effect (default)\
• fade in

**Example value**:\
`fade in`

**Path to the configuration**:\
Tab "Content" => Block "Sliders" => Section "Arrow navigation"

**Technical name**:\
`twt-base-slider-controls-hover-type`

***

### Text colour

**Field type**:\
Color picker

**Example value**:\
`$sw-color-brand-primary`

**Path to the configuration**:\
Tab "Content" => Block "Sliders" => Section "Arrow navigation"

**Technical name**:\
`twt-base-slider-controls-color`

***

### Border colour

**Field type**:\
Color picker

**Example value**:\
`transparent`

**Path to the configuration**:\
Tab "Content" => Block "Sliders" => Section "Arrow navigation"

**Technical name**:\
`twt-base-slider-controls-border-color`

***

### Background colour

**Field type**:\
Color picker

**Example value**:\
`transparent`

**Path to the configuration**:\
Tab "Content" => Block "Sliders" => Section "Arrow navigation"

**Technical name**:\
`twt-base-slider-controls-background-color`

***

### Text colour @hover

**Field type**:\
Color picker

**Example value**:\
`$sw-color-brand-secondary`

**Path to the configuration**:\
Tab "Content" => Block "Sliders" => Section "Arrow navigation"

**Technical name**:\
`twt-base-slider-controls-color-hover`

***

### Border colour @hover

**Field type**:\
Color picker

**Example value**:\
`darken($twt-base-slider-controls-border-color, 10%)`

**Path to the configuration**:\
Tab "Content" => Block "Sliders" => Section "Arrow navigation"

**Technical name**:\
`twt-base-slider-controls-border-color-hover`

***

### Background colour @hover

**Field type**:\
Color picker

**Example value**:\
`darken($twt-base-slider-controls-background-color, 7.5%)`

**Path to the configuration**:\
Tab "Content" => Block "Sliders" => Section "Arrow navigation"

**Technical name**:\
`twt-base-slider-controls-background-color-hover`

## Dots navigation

***

### Layout type

**Field type**:\
Select

**Available values**:\
• Rectangle\
• Square/Circle (default)

**Example value**:\
`Square/Circle (default)`

**Path to the configuration**:\
Tab "Content" => Block "Sliders" => Section "Dots navigation"

**Technical name**:\
`twt-base-slider-navigation-dots-style`

***

### Corner type

**Field type**:\
Select

**Available values**:\
• not rounded\
• rounded corners\
• round corners (default)

**Example value**:\
`round corners (default)`

**Path to the configuration**:\
Tab "Content" => Block "Sliders" => Section "Dots navigation"

**Technical name**:\
`twt-base-slider-navigation-dots-type`

{% hint style="info" %}
**rounded corners**\
Uses the configuration "Border radius". ("Layout" > "Layout" > "Border radius")

**round corners**\
Uses a predefined radius for round corners.
{% endhint %}

***

### Hover effect

**Field type**:\
Select

**Available values**:\
• default\
• scale up\
• stroke\
• fill in\
• dot stroke

**Example value**:\
`default`

**Path to the configuration**:\
Tab "Content" => Block "Sliders" => Section "Dots navigation"

**Technical name**:\
`twt-base-slider-navigation-dots-hover-type`

***

### Horizontal alignment

**Field type**:\
Select

**Available values**:\
• align left\
• align right\
• align center (default)

**Example value**:\
`align center (default)`

**Path to the configuration**:\
Tab "Content" => Block "Sliders" => Section "Dots navigation"

**Technical name**:\
`twt-base-slider-navigation-dots-alignment`

***

### Colour (Primary)

**Field type**:\
Color picker

**Example value**:\
`#bcc1c7`

**Path to the configuration**:\
Tab "Content" => Block "Sliders" => Section "Dots navigation"

**Technical name**:\
`twt-base-slider-navigation-dots-background-color`

***

### Colour (Secondary) @active/hover

**Field type**:\
Color picker

**Example value**:\
`#798490`

**Path to the configuration**:\
Tab "Content" => Block "Sliders" => Section "Dots navigation"

**Technical name**:\
`twt-base-slider-navigation-dots-background-color-active`