Product slider

Der Slider zeigt ein Produktkarussell mit sanftem Scrollen auf Basis von CSS Scroll-Snap. Er benötigt keine externen JS-Bibliotheken (Slick, Swiper) - er nutzt native Mechanismen des Browsers.

Modul aktivieren

Gehen Sie zu WooCommerce > Polski > Storefront Modules und aktivieren Sie die Option Product Slider.

Scroll-Snap-Technologie

Der Slider verwendet CSS scroll-snap-type: x mandatory anstelle klassischer Karussell-Bibliotheken. Vorteile:

Kein JavaScript für das Scrollen - sanftes natives Scrollen
Keine Abhängigkeiten - kein Laden von Slick, Swiper oder Owl Carousel erforderlich
Volle Responsivität - automatische Anpassung an die Bildschirmbreite
Touch und Maus - native Swipe-Unterstützung auf Touch-Geräten
Leistung - kein Reflow/Repaint beim Scrollen, 60 FPS

Snap-Konfiguration:

/* The slider applies these values by default */
.polski-slider {
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
}

.polski-slider__item {
    scroll-snap-align: start;
}

Slider-Typen

Angebotsprodukte

Zeigt Produkte mit einem aktiven Angebotspreis.

[polski_product_slider type="sale" limit="12"]

Hervorgehobene Produkte

Zeigt als hervorgehoben markierte Produkte (Stern im WooCommerce-Panel).

[polski_product_slider type="featured" limit="8"]

Bestseller

Nach Gesamtverkaufszahl sortierte Produkte.

[polski_product_slider type="bestsellers" limit="10"]

Neueste

Nach Hinzufügedatum sortierte Produkte.

[polski_product_slider type="latest" limit="10"]

Aus einer bestimmten Kategorie

Produkte aus einer bestimmten Kategorie.

[polski_product_slider type="category" category="electronics" limit="12"]

Ausgewählte Produkte

Bestimmte Produkte, angegeben per ID.

[polski_product_slider type="ids" ids="12,34,56,78,90"]

Gutenberg-Block

Der Block Polski - Product Slider ist im Gutenberg-Editor verfügbar. Die Slider-Vorschau ist direkt im Editor sichtbar.

Block-Optionen:

Option	Beschreibung	Standard
Type	Produktquelle (related/sale/featured/usw.)	latest
Limit	Maximale Anzahl der Produkte	8
Columns	Sichtbare Produkte (Desktop)	4
Columns tablet	Sichtbare Produkte auf dem Tablet	2
Columns mobile	Sichtbare Produkte auf dem Smartphone	1
Arrows	Navigationspfeile anzeigen	Ja
Dots	Paginierungspunkte anzeigen	Nein
Auto scroll	Automatisches Scrollen	Nein
Gap	Abstand zwischen Produkten	16px
Title	Titel über dem Slider	(leer)

Shortcode `[polski_product_slider]`

Parameter

Parameter	Typ	Standard	Beschreibung
`type`	string	`latest`	Typ: related, sale, featured, bestsellers, latest, category, ids
`limit`	int	`8`	Maximale Anzahl der Produkte
`columns`	int	`4`	Desktop-Spalten
`columns_tablet`	int	`2`	Tablet-Spalten
`columns_mobile`	int	`1`	Mobile-Spalten
`category`	string	(leer)	Kategorie-Slug (für type=category)
`ids`	string	(leer)	Produkt-IDs (für type=ids)
`product_id`	int	(aktuell)	Produkt-ID (für type=related)
`arrows`	string	`yes`	Pfeile anzeigen
`dots`	string	`no`	Paginierungspunkte anzeigen
`autoplay`	string	`no`	Automatisches Scrollen
`autoplay_speed`	int	`5000`	Pause zwischen Slides (ms)
`gap`	string	`16px`	Abstand zwischen Produktkarten
`title`	string	(leer)	Titel über dem Slider
`orderby`	string	`date`	Sortieren nach: date, price, rating, rand
`order`	string	`DESC`	Richtung: ASC oder DESC

Beispiele

Slider mit Angebotsprodukten und Titel:

[polski_product_slider type="sale" limit="12" columns="4" title="Current promotions" arrows="yes"]

Slider mit Kategorieprodukten auf der Startseite:

[polski_product_slider type="category" category="new-arrivals" limit="8" columns="3" dots="yes"]

Automatisch scrollender Bestseller-Slider:

[polski_product_slider type="bestsellers" limit="10" autoplay="yes" autoplay_speed="4000"]

Automatisches Scrollen

Bei autoplay="yes" scrollt der Slider die Produkte automatisch im angegebenen Intervall. Das Scrollen stoppt, wenn der Nutzer mit dem Mauszeiger über den Slider fährt oder ihn auf einem Mobilgerät berührt. Nach dem Verlassen des Sliders wird das automatische Scrollen fortgesetzt.

// Change default autoplay time globally
add_filter('polski/product_slider/autoplay_speed', function (): int {
    return 3000; // 3 seconds
});

Integration mit Modulen

Produktkarten im Slider enthalten Elemente aus anderen Modulen:

Badges - Badges für Angebot, Neuheit, Bestseller
Wishlist - Herz-Symbol
Compare - Vergleichsschaltfläche
Quick view - Augen-Symbol
Omnibus-Preis - niedrigster Preis der letzten 30 Tage

Lazy Loading von Bildern

Produktbilder im Slider werden per Lazy Loading geladen - Bilder außerhalb des sichtbaren Bereichs werden erst beim Scrollen abgerufen. Verwendet werden das native Attribut loading="lazy" und Intersection Observer für ältere Browser.

CSS-Gestaltung

.polski-slider - Slider-Container
.polski-slider__track - Scroll-Track
.polski-slider__item - Produktkarte
.polski-slider__arrow - Navigationspfeil
.polski-slider__arrow--prev - Pfeil nach links
.polski-slider__arrow--next - Pfeil nach rechts
.polski-slider__dots - Container für Paginierungspunkte
.polski-slider__dot - einzelner Punkt
.polski-slider__dot--active - aktiver Punkt
.polski-slider__title - Titel

Fehlerbehebung

Der Slider scrollt nicht sanft - stellen Sie sicher, dass der Browser scroll-snap-type unterstützt. Alle modernen Browser (Chrome 69+, Firefox 68+, Safari 11+) unterstützen diese Eigenschaft.

Die Pfeile funktionieren nicht - prüfen Sie, ob ein CSS-Konflikt mit einem anderen Slider auf der Seite besteht. Die Klassen .polski-slider__arrow können durch Theme-Stile überschrieben werden.

Autoplay stoppt nicht - stellen Sie sicher, dass JavaScript nicht durch ein Optimierungs-Plugin blockiert wird. Das Slider-Skript muss geladen sein.

Probleme melden: github.com/wppoland/polski/issues

Diese Seite dient ausschließlich zu Informationszwecken und stellt keine Rechtsberatung dar. Konsultieren Sie vor der Umsetzung einen Anwalt. Polski for WooCommerce ist Open-Source-Software (GPLv2), die ohne Gewährleistung bereitgestellt wird.