# Bild- & Galerie-Slider

Es gibt drei wichtige Slider-Typen

1. Image Slider = Erlebniswelten-Element zur Darstellung von Bild-Slidern
2. Galerie Slider = Element zur Darstellung der Produktbilder auf der Produktdetailseite
3. Produkt Slider = Element zur Darstellung von Produktkacheln als Slider-Element

Zusätzlich kann man in den meisten Slidern bestimmen, ob die Navigationselemente innen (auf dem Bild) oder außen, außerhalb des Bildes dargestellt werden sollen.

### Galerie-Slider (Navigation Modus: Außen)

![](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2FHx7ybXOS3PxoPXbQfpCh%2Fdocs-de-config-theme-components-image-gallery-slider-gallery-slider-outside.png?alt=media\&token=b84b431f-4aaf-4089-b5fe-3df5d44e5521)

Beispiel:

![Pfeile und Dots einer Galerie](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-7f90a4e91897e792d69f14827b5a911d28ff4de2%2Fdocs-front-elemente-gallery-controls-2.jpg?alt=media)

### Galerie-Slider (Navigation Modus: Innen)

![](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2FKctj20Ma6LH2QMMa80fT%2Fdocs-de-config-theme-components-image-gallery-slider-gallery-slider-inside.png?alt=media\&token=f79dfb59-5e73-4f88-958a-d1dfe388180b)

Beispiel:

![Pfeile und Dots einer Galerie](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-7f90a4e91897e792d69f14827b5a911d28ff4de2%2Fdocs-front-elemente-gallery-controls-2.jpg?alt=media)

### Bild-Slider (Navigation Modus: Außen)

![](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2FbccyrVoVhfc08vhKKRVM%2Fdocs-de-config-theme-components-image-gallery-slider-image-slider-outside.png?alt=media\&token=14d13e4f-ed1b-4f87-b32b-b785ee71f20f)

Beispiel:

![Navigations-Elemente außen](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-25e5eebf68620623fc8b70ed49b3aabe329106cb%2Fdocs-front-elemente-slider-controls-outside.png?alt=media)

### Bild-Slider (Navigation Modus: Innen)

![](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2FgFu9MMyOEvDU0Pqvf1Mn%2Fdocs-de-config-theme-components-image-gallery-slider-image-slider-inside.png?alt=media\&token=08be877a-c00e-4905-829a-f9294ff86638)

Beispiel:

![Navigations-Elemente innen](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-5251e422f7f27ccff74bceda861955190249b784%2Fdocs-front-elemente-slider-controls.jpg?alt=media)

### Grundeinstellungen

![](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-169639cc9ff770f50850ebe7fd8fa26844f7b1c4%2Fdocs-de-theme-config-elements-slider-basic-configuration.png?alt=media)

Die **Platzierung (1)** der **Pfeile (2)** und **Dots (1)** kann `Alternativ` auf die rechte Seite des Sliders gesetzt werden. Im `Standard` befinden sich die Dots im unteren mittigen Bereich. Die Pfeile liegen links und rechts vertikal zentriert.

Das Aussehen der **Punkte Navigation (2)** kann von `Punkten` zu `Balken` oder `Expandieren` geändert werden.

**(3, 4)** Die Pfeile der jeweiligen Slider können so eingestellt werden, dass diese erst sichtbar werden, wenn man mit der Maus über dem Slider fährt.

Beispiele:

![Standard Platzierung](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-c0ec0e28285e3bc4696f922256da3ee8db2c69a0%2Fdocs-de-storefront-theme-elements-slider-basic-configuration.png?alt=media)