> ## 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.

# Produkt Slider

## Allgemeine Beschreibung

Der **Produkt Slider** basiert auf dem ProductStream V2. Die Produktkarten kommen direkt aus deinem Template und sehen im Slider genauso aus wie im normalen Produkt-Listing, in NIU Plus mit Kartenstil und Theme v2, in NOVA nativ.

<Note>
  Die bisherige Version dieses Portlets ist weiterhin als [Produkt Slider (Legacy)](/OPC-Plus/Produkt-Slider-Legacy) verfügbar und rendert unverändert weiter.
</Note>

## Einsatzmöglichkeiten (Inspiration)

* **Produkt-Highlights:** Zeige ausgewählte Produkte aus verschiedenen Kategorien als Highlights, um Kunden auf besondere Angebote aufmerksam zu machen.
* **Saisonale Angebote:** Präsentiere saisonale Produkte oder Sondereditionen in einem auffälligen Slider, um die Aufmerksamkeit der Besucher zu gewinnen.
* **Hersteller-Specials:** Zeige Produkte eines bestimmten Herstellers oder einer Marke in einem Slider, um die Markenpräsenz zu stärken und Kundenloyalität aufzubauen.
* **Rebuy & Zuletzt gesehen:** Über die Datenquelle deckt der Slider auch die Anwendungsfälle des Rebuy Sliders und des Zuletzt-angesehen-Sliders ab.

## Featureübersicht

* **Kartendesign aus dem Template:** Die Produktkarten übernehmen automatisch das Kartendesign deines Shops, keine separate Gestaltung im Portlet mehr nötig.
* **Wählbare Datenquelle:** Speise den Slider aus einer gefilterten Produktauswahl, den zuletzt gekauften oder den zuletzt gesehenen Produkten des Besuchers.
* **Feingranulare Filterung:** Filtere Produkte gezielt oder wähle sie explizit über Artikelnummer/Artikelname aus.
* **Responsives Design:** Der Produkt Slider passt sich verschiedenen Bildschirmgrößen und Geräten an, um eine optimale Darstellung sicherzustellen.

***

## Settings

### Produktauswahl

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/p4GvRSm3P5d4iTzc/images/opc-plus-produkt-slider-produktauswahl.png?fit=max&auto=format&n=p4GvRSm3P5d4iTzc&q=85&s=ffa017be4ea7283cd4440f54f34befc6" alt="Produktauswahl" width="1332" height="2135" data-path="images/opc-plus-produkt-slider-produktauswahl.png" />
  </Frame>
</div>

<ParamField path="Datenquelle" type="select" default="Gefilterte Produktauswahl">
  Woher die Artikel kommen. Die Filter weiter unten gelten nur für die gefilterte Auswahl.

  **Optionen:**

  * **Gefilterte Produktauswahl:** Produkte werden über die Filter unter "Quelle" ermittelt
  * **Zuletzt gekauft:** Zeigt die zuletzt vom Besucher gekauften Produkte
  * **Zuletzt gesehen:** Zeigt die zuletzt vom Besucher angesehenen Produkte
</ParamField>

<ParamField path="Quelle" type="select" default="Produkte filtern">
  Nur sichtbar, wenn als Datenquelle "Gefilterte Produktauswahl" gewählt ist. Wähle aus, welche Produkte angezeigt werden sollen.

  **Optionen:**

  * **Produkte filtern (Filtering):** Auswahl über Kategorien, Hersteller, Merkmale etc.
  * **Nach Artikelnummer/Artikelname (Explicit):** Auswahl von einem oder mehreren bestimmten Artikeln
  * **Kombinierte Filter verwenden:** Mehrere Filterkriterien (Kategorien, Hersteller, Vater-/Kindartikel, besondere Produkte) lassen sich gleichzeitig kombinieren
</ParamField>

Über das Suchfeld fügst du je nach gewählter Quelle Filter oder einzelne Artikel hinzu. Aktive Filter werden darunter als Liste angezeigt und lassen sich einzeln wieder entfernen.

Bei **Kombinierte Filter verwenden** stehen zusätzlich folgende Filter zur Verfügung:

* **Nach Kategorien suchen:** Durchsuche und wähle einzelne Kategorien aus, über **Alle auswählen**/**Alle abwählen** lässt sich die gesamte Trefferliste auf einmal setzen
* **Nach Herstellern suchen:** Durchsuche und wähle einzelne Hersteller aus, ebenfalls mit **Alle auswählen**/**Alle abwählen**
* **Vater- und Kindartikel filtern?:** Legt fest, ob Varianten (Vater-/Kindartikel) gesondert berücksichtigt werden (Standard: Filter nicht verwenden)
* **Besondere Produkte filtern?:** Filtert zusätzlich nach Artikelbesonderheiten (Standard: Filter nicht verwenden)

Zusätzlich steht die Option **Produktreihenfolge beim neu laden mischen** zur Verfügung, um die Reihenfolge der Produkte bei jedem Laden neu zu mischen.

<ParamField path="Überschrift" type="string">
  Optional. Leer lassen, wenn der Slider ohne Überschrift stehen soll.
</ParamField>

<ParamField path="Anzahl der Produkte" type="number" default="15">
  Definiert die maximale Anzahl der angezeigten Produkte.
</ParamField>

<br />

### Darstellung

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/p4GvRSm3P5d4iTzc/images/opc-plus-produkt-slider-darstellung.png?fit=max&auto=format&n=p4GvRSm3P5d4iTzc&q=85&s=fa5825e6f98a9e4f296a7c6d187e5109" alt="Darstellung" width="1333" height="754" data-path="images/opc-plus-produkt-slider-darstellung.png" />
  </Frame>
</div>

<ParamField path="Vor- und Zurückbutton anzeigen?" type="boolean" default="true">
  Zeigt Pfeile für das manuelle Scrollen durch den Slider an.
</ParamField>

<ParamField path="Seitenindexierung anzeigen?" type="boolean" default="true">
  Zeigt im unteren Bereich des Sliders an, auf welcher Seite man sich befindet.
</ParamField>

<ParamField path="Vor- und Zurückbutton Typ" type="select" default="Chevron (>)">
  Legt die Darstellung der Vor- und Zurückbuttons fest.

  **Optionen:**

  * **Chevron (>)**
  * **Doppel Chevron (>>)**
  * **Standard Pfeil (->)**
</ParamField>

<br />

### Größe und Abstände

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

<ParamField path="Anzahl der sichtbaren Slides je Displaygröße" type="number">
  Definiere für jeden Breakpoint (XS, S, M, L, XL), wie viele Produkte gleichzeitig sichtbar sein sollen.
</ParamField>

<ParamField path="Anzahl der Slides, um die verschoben wird" type="number">
  Lege für dieselben Breakpoints fest, um wie viele Slides pro Klick oder Wisch weitergeschaltet wird.
</ParamField>

<ParamField path="Lücke zwischen Slides" type="select" default="M (1rem)">
  Lücke zwischen zwei Slides. Der sichtbare Abstand zwischen zwei Karten ist größer als dieser Wert, er ergibt sich aus der Lücke plus zweimal dem Innenabstand der Karten. Wer die Karten dichter setzen will, dreht deshalb meist am Innenabstand, nicht hier.

  **Optionen:**

  * **Kein Abstand**
  * **XS (0.25rem)**
  * **M (1rem)**
  * **XL (2rem)**
</ParamField>

<ParamField path="Produkte rechts anschneiden" type="select" default="Nein">
  Schneidet Produkte rechts ab, um zu zeigen, dass es noch mehr gibt.
</ParamField>

<ParamField path="Innenabstand der Karten" type="select" default="xl">
  Abstand rund um jede Karte, innerhalb ihres Slides. Er schafft Platz für die Pfeile und für den Schattenauslauf. Ein Schatten erzeugt dabei KEINEN zusätzlichen Abstand, er füllt nur den Raum sichtbar aus, der hier ohnehin steht. Zusammen mit der Lücke ergibt dieser Wert den sichtbaren Abstand zwischen zwei Karten: Lücke plus zweimal Innenabstand.
</ParamField>

<br />

### Bewegung

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/p4GvRSm3P5d4iTzc/images/opc-plus-produkt-slider-bewegung.png?fit=max&auto=format&n=p4GvRSm3P5d4iTzc&q=85&s=ccd949bb06b7b901b11400f922246277" alt="Bewegung" width="1338" height="1106" data-path="images/opc-plus-produkt-slider-bewegung.png" />
  </Frame>
</div>

<ParamField path="Ausrichtung Slider" type="select" default="links nach rechts">
  Legt fest, ob der Slider von links nach rechts oder von rechts nach links scrollt.
</ParamField>

<ParamField path="Übergangsgeschwindigkeit in Millisekunden" type="number" default="300">
  Definiert, wie viel Zeit zwischen dem Wechsel der Slides vergeht.
</ParamField>

<ParamField path="Ziehen per Maus" type="select" default="erlauben mit Einrastpunkten">
  Legt fest, ob und wie der Slider per Maus gezogen werden kann.

  **Optionen:**

  * **erlauben mit Einrastpunkten**
  * **erlauben ohne Einrastpunkte**
  * **verbieten**
</ParamField>

<ParamField path="Automatisch abspielen aktivieren?" type="boolean">
  Aktiviert das automatische Weiterschalten des Sliders.
</ParamField>

<ParamField path="Abspielintervall in Millisekunden" type="number" default="3000">
  Zeitabstand zwischen den automatischen Übergängen. Wirkt nur, wenn automatisches Abspielen aktiviert ist.
</ParamField>

<ParamField path="Pausieren bei Hover?" type="boolean" default="true">
  Pausiert das automatische Abspielen, sobald der Nutzer mit der Maus über den Slider fährt.
</ParamField>

<br />

### Strukturierte Daten

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/p4GvRSm3P5d4iTzc/images/opc-plus-produkt-slider-strukturierte-daten.png?fit=max&auto=format&n=p4GvRSm3P5d4iTzc&q=85&s=6638425fe3427833ba5f7f7feb03a8f5" alt="Strukturierte Daten" width="1332" height="494" data-path="images/opc-plus-produkt-slider-strukturierte-daten.png" />
  </Frame>
</div>

<ParamField path="Strukturierte Daten verwenden?" type="boolean">
  Nur relevant für NIU Plus und Slider mit Item Box Templates. Entfernt bei Bedarf das Microdata Markup, z. B. wenn der Slider auf Produktseiten platziert werden soll.
</ParamField>

<br />

### Veraltet

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/p4GvRSm3P5d4iTzc/images/opc-plus-produkt-slider-veraltet.png?fit=max&auto=format&n=p4GvRSm3P5d4iTzc&q=85&s=78ea765f89a57a223865ddd829695fef" alt="Veraltet" width="1342" height="1040" data-path="images/opc-plus-produkt-slider-veraltet.png" />
  </Frame>
</div>

<Note>
  Diese Einstellungen stammen aus dem alten Slider-Mechanismus und sind aus Kompatibilitätsgründen weiterhin vorhanden. Für neue Slider sind sie in der Regel nicht notwendig.
</Note>

<ParamField path="Typ des Sliders" type="select" default="Wischen - Dauerschleife">
  Legt den grundlegenden Slider-Mechanismus fest.

  **Optionen:**

  * **Wischen - Dauerschleife**
  * **Wischen - von Anfang bis Ende**
  * **Verblenden - Von Anfang bis Ende**
</ParamField>

<ParamField path="Zurückspulen?" type="boolean">
  Aktiviert das Zurückspulen des Sliders zum Anfang.
</ParamField>

<ParamField path="Geschwindigkeit Zurückspulen in Millisekunden" type="number" default="1000">
  Definiert, wie schnell der Slider beim Zurückspulen läuft.
</ParamField>

<ParamField path="Zurückspulen durch ziehen?" type="boolean">
  Erlaubt das Zurückspulen durch Ziehen mit der Maus.
</ParamField>

<ParamField path="Pausieren wenn Fokusiert?" type="boolean" default="true">
  Pausiert den Slider, sobald er fokussiert ist.
</ParamField>

<ParamField path="Feste Breite der Slides" type="string">
  Optional. Gibt den Slides eine feste Breite statt einer relativen.
</ParamField>

<ParamField path="Breite Slider" type="string" default="100%">
  Legt die Gesamtbreite des Sliders fest.
</ParamField>

<ParamField path="Anzahl Kopien selbst definieren" type="boolean">
  Erlaubt es, die Anzahl der für die Dauerschleife benötigten Kopien manuell festzulegen.
</ParamField>

<ParamField path="Anzahl Kopien im Slider" type="number">
  Nur relevant, wenn "Anzahl Kopien selbst definieren" aktiv ist.
</ParamField>

<div style={{height: '1px', backgroundColor: 'silver', margin: '24px 0'}} />


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.