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

# Slider

> Slider-Einstellungen und -Konfiguration

Wähle deine Slidereinstellungen. Die Slidereinstellungen wirken sich auf alle Standardslider aus, die automatisch im Template ausgespielt werden, wie z.B. die Bestsellerslider.

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>
    <img src="https://mintcdn.com/dzm/ml9hS_E82Fx1D7IG/images/niu-plus-slider-allgemein.jpg?fit=max&auto=format&n=ml9hS_E82Fx1D7IG&q=85&s=13f8e6ec28962f6fc2f4aa677f48c7a9" alt="Allgemein" width="2322" height="1116" data-path="images/niu-plus-slider-allgemein.jpg" />
  </Frame>
</div>

## Allgemeine Einstellungen

### Slider Typ

Lege hier fest, ob die Slider sich endlosen wiederholen oder mit dem letzten Element enden sollen.

### Slider auf kleinen Displaygrößen anschneiden

Wenn aktiviert wird die erste, nicht mehr sichtbare Karte etwas angeschnitten angezeigt, damit dem User vermittelt wird, dass er weiter sliden kann, um mehr zu sehen.

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>![](https://t4655718.p.clickup-attachments.com/t4655718/d927df6c-d1fd-4e84-85cc-60848a1066e8/image.png)</Frame>
</div>

### Rewind Modus

Wenn aktiviert, springen die Slider sobald sie am Ende angelangt sind wieder zurück zum Anfang.

### Slidergeschwindigkeit

Bestimme wie schnell der Slider seine Position wechseln soll. Gib dafür eine Zeit ins Millisekunden (ms) an. Der Standardwert beträgt: 400.

### Slides pro Seite

Hier kannst du flexibel einstellen, wie viele Slides je nach Bildschirmgröße angezeigt werden sollen.

**Standardwerte:**
XS = 1, SM = 2, MD = 4, XL = 4

**Definition der Bildschirmgrößen:**
XS = >576px, SM = ≥576px, MD = ≥768px, XL = ≥1200px

***

## Darstellung

### Seitennavigation einblenden

Aktiviere diese Option, um eine Punktnavigation unter dem Slider zu erzeugen, wenn mehr Slides vorhanden sind als auf einen Blick darstellbar. Über diese Punktnavigation kann direkt zum nächsten Satz Slides navigiert werden.

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>![](https://t4655718.p.clickup-attachments.com/t4655718/cb1791d8-531b-4ccf-b409-d3c467d53bf9/ezgif.com-video-to-gif-converter%20\(2\).gif)</Frame>
</div>

### Pfeile einblenden

Lege fest, ob links und rechts vom Slider Navigationspfeile eingeblendet werden sollen.

<div className="border border-[#DFE1E1] rounded-2xl overflow-hidden dark:border-transparent">
  <Frame>![](https://t4655718.p.clickup-attachments.com/t4655718/ab7a7ec3-62ff-4491-a921-3b87aa013185/image.png)</Frame>
</div>

### Custom SVG für Pfeile

Hier kannst du einen eigenen SVG Code für die Darstellung der Pfeile hinterlegen. Lasse das Feld leer für den Standardpfeil.

### Autoplay

Entscheide, ob die Slider automatisch abspielen sollen oder nicht.

### Containerbreite

Definiere hier die globale Containerbreite für deine Slider. Du hast die Auswahl zwischen Standard Container (1250px), Container Fluid XL (1650px, je nach [Settings](https://app.clickup.com/4655718/v/dc/4e2k6-14581/4e2k6-20015?block=block-07538b23-46a2-48ec-a5eb-1566e3004d1c)) und Container Fluid (Bildschirmbreite).

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