Hero Slider
CSS scroll-snap Kartenslider für Featured Products – verwendet in Shop Layout 2
Spezifikation
Hero Card Slider
3 Slides · snap-x snap-mandatory · Prev/Next nur wenn nicht am Rand · Dots unterhalb
La Marzocco
Linea Mini R
Das Flaggschiff für Zuhause – Dual-Boiler-Technologie im ikonischen La Marzocco Design.
5.290 €inkl. MwSt.
La Marzocco
Linea PB X
Für anspruchsvolle Gastronomie – maximale Leistung, Konsistenz und Style hinter der Bar.
Preis auf Anfrage
Ceado
REV Titan WAM
Präzision neu definiert – die Ceado REV Titan mit Wiege-Automatik mahlt auf das Gramm genau.
3.495 €inkl. MwSt.
1 / 3 — La Marzocco Linea Mini R
Merkmale
Container-Styling
bg-[var(--ce-surface-card)], rounded-[16px], border, shadow-[var(--ce-shadow-card)]
CSS Scroll-Snap
snap-x snap-mandatory (Container), snap-start (Slides)
Prev/Next Pfeile
Nur sichtbar wenn nicht am Anfang/Ende – bedingte Darstellung via activeIdx
Dot Indicators
Unterhalb der Card – aktiver Dot invertiert, inaktive mit border-default
Slide Layout
flex-col auf Mobile, flex-row ab md: – Bild links, Text rechts
Preis + CTAs
mb-auto auf Beschreibung drückt Preis/Buttons nach unten
Spezifikationen
| Eigenschaft | Wert |
|---|---|
| Scroll-Verhalten | CSS scroll-snap (snap-x snap-mandatory) |
| Navigation | Prev/Next Pfeile + Dots |
| Slide Layout | Bild links, Text rechts |
| Responsive | Gestapelt auf Mobile (flex-col) |
| Buttons | px-4 py-2 text-[13px] rounded-[8px] |
| Container | bg-[var(--ce-surface-card)] rounded-[16px] border shadow |
| Pfeile sichtbar | Bedingt – ausgeblendet am Anfang/Ende |