# Produkt slider

![](https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4i6VN0FeNAgRFLwVM2Cr%2Fuploads%2FfqB1snPp01C5yloFnUoj%2Fdocs-en-config-theme-components-product-slider-colors.png?alt=media\&token=10253b1e-63ac-4d14-a344-39d24c3c0c18)

Example:

![](https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4i6VN0FeNAgRFLwVM2Cr%2Fuploads%2FsA7FXOSMEnK8tREJpkby%2Fdocs-theme-elemente-slider-controls-product-slider-demo.jpg?alt=media\&token=71787aae-6c84-491d-8f2f-0026e31f98fa)

The **appearance (1)** of the product slider can be set to display elements outside the active area with 50% visibility. Often this can increase the impact of the product slider and the interaction with this element.

Optionally, you can **show arrow controls on mouseover only (2)**. 

![](https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4i6VN0FeNAgRFLwVM2Cr%2Fuploads%2FS2yIOiinoejWhnDvNWx2%2Fdocs-en-config-theme-components-product-slider-basic-configuration.png?alt=media\&token=b8e0e390-9c37-4ec4-b5ed-9b6eff93e5b5)

Example:

![Default](https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MCG4xkoMVXEQllVF5R9%2F-MfHaLOVUe22H_XdLP92%2F-MfHfWlN1HnGQxc4bp5d%2Fdocs-front-elemente-produkt-slider-standard.png?alt=media\&token=2f7a0b9e-5f91-428b-981a-4619c18b5eba)

![Expanded](https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MCG4xkoMVXEQllVF5R9%2F-MfHaLOVUe22H_XdLP92%2F-MfHfb4qDfdHMQtbcgWx%2Fdocs-front-elemente-produkt-slider-erweitert.png?alt=media\&token=6c9f283e-b91a-4182-b171-ae0a0f96e02c)