> For the complete documentation index, see [llms.txt](https://docs.themeware.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.themeware.design/manual/shopping-experiences/image-slider-category-images/configuration.md).

# Configuration

***

### Individual styling

**Field type**:\
Select

**Available values**:\
• don't use (default)\
• use individual styling

**Example value**:\
`don't use (default)`

**Path to the configuration**:\
Tab "Shopping Experiences" => Block "Image slider (Category "Images")"

**Technical name**:\
`twt-image-slider-controls-individual`

{% hint style="info" %}
In the tab "Content" you can configure all sliders globally.
{% endhint %}

## Arrow navigation (Individual styling)

***

### Layout type

**Field type**:\
Select

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

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

**Path to the configuration**:\
Tab "Shopping Experiences" => Block "Image slider (Category "Images")" => Section "Arrow navigation (Individual styling)"

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

***

### Corner type

**Field type**:\
Select

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

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

**Path to the configuration**:\
Tab "Shopping Experiences" => Block "Image slider (Category "Images")" => Section "Arrow navigation (Individual styling)"

**Technical name**:\
`twt-image-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 "Shopping Experiences" => Block "Image slider (Category "Images")" => Section "Arrow navigation (Individual styling)"

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

***

### Text colour

**Field type**:\
Color picker

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

**Path to the configuration**:\
Tab "Shopping Experiences" => Block "Image slider (Category "Images")" => Section "Arrow navigation (Individual styling)"

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

***

### Border colour

**Field type**:\
Color picker

**Example value**:\
`transparent`

**Path to the configuration**:\
Tab "Shopping Experiences" => Block "Image slider (Category "Images")" => Section "Arrow navigation (Individual styling)"

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

***

### Background colour

**Field type**:\
Color picker

**Example value**:\
`transparent`

**Path to the configuration**:\
Tab "Shopping Experiences" => Block "Image slider (Category "Images")" => Section "Arrow navigation (Individual styling)"

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

***

### Text colour @hover

**Field type**:\
Color picker

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

**Path to the configuration**:\
Tab "Shopping Experiences" => Block "Image slider (Category "Images")" => Section "Arrow navigation (Individual styling)"

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

***

### Border colour @hover

**Field type**:\
Color picker

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

**Path to the configuration**:\
Tab "Shopping Experiences" => Block "Image slider (Category "Images")" => Section "Arrow navigation (Individual styling)"

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

***

### Background colour @hover

**Field type**:\
Color picker

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

**Path to the configuration**:\
Tab "Shopping Experiences" => Block "Image slider (Category "Images")" => Section "Arrow navigation (Individual styling)"

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

## Dots navigation (Individual styling)

***

### Horizontal alignment

**Field type**:\
Select

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

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

**Path to the configuration**:\
Tab "Shopping Experiences" => Block "Image slider (Category "Images")" => Section "Dots navigation (Individual styling)"

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