> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dreizack-medien.de/llms.txt
> Use this file to discover all available pages before exploring further.

# Kategorie Slider

# Allgemeine Beschreibung

Das "Kategorie Slider" Portlet zeigt eine frei wählbare Auswahl an Kategorien als Slider an, inklusive Bild, Titel und individuell konfigurierbarer Darstellung.

# Einsatzmöglichkeiten (Inspiration)

* **Kategorien bewerben:** Hebe ausgewählte Kategorien (z. B. Aktionen oder Saisonthemen) prominent auf der Startseite oder Landingpages hervor.
* **Navigation erleichtern:** Biete Besuchern einen schnellen visuellen Einstieg in dein Sortiment.

***

# Settings:

## Kategorieauswahl

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/5yI44_TalYoOc6bU/images/opc-plus-kategorie-slider-kategorieauswahl.png?fit=max&auto=format&n=5yI44_TalYoOc6bU&q=85&s=14af35b0b9cc56b4b7c321fc0a613505" alt="Kategorieauswahl" width="1076" height="928" data-path="images/opc-plus-kategorie-slider-kategorieauswahl.png" />
  </Frame>
</div>

**Kategorien Auswählen:** Suche über das Textfeld nach Kategorien und wähle per Klick aus den gefundenen Einträgen die Kategorien aus, die im Slider angezeigt werden sollen. Über **Alle auswählen** bzw. **Alle abwählen** kannst du die gesamte Trefferliste auf einmal (ab)wählen.

<Note>
  Angeklickte, also ausgewählte Kategorien werden blau hinterlegt dargestellt.
</Note>

***

## Darstellung

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/5yI44_TalYoOc6bU/images/opc-plus-kategorie-slider-darstellung.jpg?fit=max&auto=format&n=5yI44_TalYoOc6bU&q=85&s=d042a683e9c80b72be9dbb4647b4e564" alt="Darstellung" width="1426" height="1995" data-path="images/opc-plus-kategorie-slider-darstellung.jpg" />
  </Frame>
</div>

### Slider-Darstellung

**Slider Typ:** Wähle, ob die Slides als Bild & Text oder in einer anderen Variante dargestellt werden.

**Bildtyp:** Lege fest, ob das Bild als Hintergrundbild oder als Produktbild dargestellt wird.

* Bild ist Hintergrundbild
* Bild ist Produktbild

**Bildgröße:** Wähle die Bildgröße für die Darstellung (Standard: `default`).

**Fallback image:** Wird angezeigt, wenn für eine Kategorie kein Bild hinterlegt ist.

**Farbüberlagerung:** Legt eine Farbe zwischen Bild und Inhalt, um die Lesbarkeit zu verbessern. Verwende den Transparenz-Slider, um das Bild durchscheinen zu lassen.

**Seitenverhältnis des Bildes:** Lege das Seitenverhältnis fest:

* 1 / 1
* 16 / 9
* 3 / 2
* custom

**Kategorie-Slider Kartentyp:** Wähle, wo der Text der Karte angezeigt wird:

* Text in der Karte
* Text unter der Karte

### Slider-Item-Darstellung

**Textposition horizontal / vertikal:** Positioniere den Text innerhalb der Karte (z. B. Links / Oben).

**Innenabstand:** Lege den Innenabstand der Karte fest (z. B. `p-0`).

**HTML-Tag der Überschrift:** Wähle das HTML-Tag für die Überschrift (h1-h6 oder Standard Text).

**Größe der Überschrift:** Bestimmt, wie groß der Text dargestellt wird und orientiert sich an den Vorgaben (h1-h6 & p) des aktuellen Themes.

**Textfarbe der Überschrift:** Wähle eine eigene Farbe für die Überschrift oder belasse die Standardfarbe.

**Schrift-Dicke:** Bestimmt die font-weight (CSS) der Überschrift (z. B. `800`).

### Slider-Controls-Darstellung

**Vor- und Zurückbutton anzeigen?:** Aktiviere die Navigationsbuttons des Sliders.

**Seitenindexierung anzeigen?:** Aktiviere die Punktnavigation unter dem Slider.

**Vor- und Zurückbutton Typ:** Wähle die Darstellung der Navigationsbuttons:

* Chevron (>)
* Doppel Chevron (>>)
* Standard Pfeil (->)

***

## Größe und Abstände

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/5yI44_TalYoOc6bU/images/opc-plus-kategorie-slider-groesse-abstaende.jpg?fit=max&auto=format&n=5yI44_TalYoOc6bU&q=85&s=a71373be17a54f35a18038d0d267460b" alt="Größe und Abstände" width="1426" height="1316" data-path="images/opc-plus-kategorie-slider-groesse-abstaende.jpg" />
  </Frame>
</div>

### Slides - Darstellung

**Anzahl der sichtbaren Slides je Displaygröße:** Lege für die folgenden Breakpoints fest, wie viele Slides gleichzeitig sichtbar sein sollen:

* **XS:** \<576px
* **S:** ≥576px
* **M:** ≥768px
* **L:** ≥992px
* **XL:** ≥1200px

**Anzahl der Slides, um die verschoben wird:** Lege für dieselben Breakpoints fest, um wie viele Slides pro Klick oder Wisch weitergeschaltet wird.

### Slides - Größe und Abstände

**Lücke zwischen Slides:** Wähle den Abstand zwischen den einzelnen Slides:

* Kein Abstand
* XS (0.25rem)
* M (1rem)
* XL (2rem)

**Produkte rechts anschneiden:** Schneidet Produkte rechts ab, um zu zeigen, dass es noch mehr gibt.

***

## Bewegung

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/5yI44_TalYoOc6bU/images/opc-plus-kategorie-slider-bewegung.jpg?fit=max&auto=format&n=5yI44_TalYoOc6bU&q=85&s=0abf00c0dc929b767c17f3ab8262eb44" alt="Bewegung" width="1430" height="1104" data-path="images/opc-plus-kategorie-slider-bewegung.jpg" />
  </Frame>
</div>

**Ausrichtung Slider:** Bestimmt die Laufrichtung des Sliders (z. B. links nach rechts).

**Übergangsgeschwindigkeit in Millisekunden:** Geschwindigkeit des Übergangs zwischen den Slides.

**Ziehen per Maus:** Lege fest, ob und wie der Slider per Maus gezogen werden kann (z. B. "erlauben mit Einrastpunkten").

### Optionen für Automatisches abspielen

**Automatisch abspielen aktivieren?:** Aktiviert das automatische Weiterschalten des Sliders.

**Abspielintervall in Millisekunden:** Zeitabstand zwischen den automatischen Übergängen.

**Pausieren bei Hover?:** Pausiert das automatische Abspielen, sobald der Nutzer mit der Maus über den Slider fährt.

***

<Note>
  Für weitere Einstellungen zum Layout, siehe den Tab **Layout** im Portlet selbst.
</Note>

***

# Beispiel

So erscheint der Kategorie Slider im Frontend:

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/5yI44_TalYoOc6bU/images/opc-plus-kategorie-slider-beispiel.png?fit=max&auto=format&n=5yI44_TalYoOc6bU&q=85&s=aa1c995475c56e7c7799514b5bd8d81f" alt="Beispiel" width="1600" height="491" data-path="images/opc-plus-kategorie-slider-beispiel.png" />
  </Frame>
</div>

***