Slider produktu
Slider produktu zobrazuje karusel produktu s plynulym scrollovanim na bazi CSS scroll-snap. Nevyzaduje externi JS knihovny (Slick, Swiper) - vyuziva nativni mechanismy prohlizece.
Aktivace modulu
Section titled “Aktivace modulu”Prejdete do WooCommerce > Polski > Moduly obchodu a aktivujte moznost Slider produktu.
Technologie scroll-snap
Section titled “Technologie scroll-snap”Slider vyuziva CSS scroll-snap-type: x mandatory misto tradicnich karuselovych knihoven. Vyhody:
- Nulovy JavaScript pro scrollovani - plynule nativni scrollovani
- Zadne zavislosti - neni treba nacitat Slick, Swiper ani Owl Carousel
- Uplna responsivita - automaticke prizpusobeni sirce obrazovky
- Dotyk a mys - nativni podpora swipe na dotykovych zarizenich
- Vykon - zadny reflow/repaint pri scrollovani, 60 FPS
Typy slideru
Section titled “Typy slideru”Souvisejici produkty (related)
Section titled “Souvisejici produkty (related)”[polski_product_slider type="related" product_id="123"]Produkty v akci (sale)
Section titled “Produkty v akci (sale)”[polski_product_slider type="sale" limit="12"]Doporucene produkty (featured)
Section titled “Doporucene produkty (featured)”[polski_product_slider type="featured" limit="8"]Bestsellery
Section titled “Bestsellery”[polski_product_slider type="bestsellers" limit="10"]Nejnovejsi
Section titled “Nejnovejsi”[polski_product_slider type="latest" limit="10"]Z vybrane kategorie
Section titled “Z vybrane kategorie”[polski_product_slider type="category" category="elektronika" limit="12"]Vybrane produkty
Section titled “Vybrane produkty”[polski_product_slider type="ids" ids="12,34,56,78,90"]Gutenberg blok
Section titled “Gutenberg blok”Blok Polski - Slider produktu dostupny v editoru Gutenberg. Nahled slideru viditelny primo v editoru.
Shortcode [polski_product_slider]
Section titled “Shortcode [polski_product_slider]”Parametry
Section titled “Parametry”| Parametr | Typ | Vychozi | Popis |
|---|---|---|---|
type | string | latest | Typ: related, sale, featured, bestsellers, latest, category, ids |
limit | int | 8 | Max pocet produktu |
columns | int | 4 | Sloupce na desktopu |
columns_tablet | int | 2 | Sloupce na tabletu |
columns_mobile | int | 1 | Sloupce na telefonu |
category | string | (prazdny) | Slug kategorie (pro type=category) |
ids | string | (prazdny) | ID produktu (pro type=ids) |
arrows | string | yes | Zobrazit sipky |
dots | string | no | Zobrazit tecky strankovani |
autoplay | string | no | Automaticky scroll |
autoplay_speed | int | 5000 | Pauza mezi slajdy (ms) |
gap | string | 16px | Mezera mezi kartami produktu |
title | string | (prazdny) | Hlavicka nad sliderem |
orderby | string | date | Razeni: date, price, rating, rand |
order | string | DESC | Smer: ASC nebo DESC |
Priklady
Section titled “Priklady”Slider produktu v akci s hlavickou:
[polski_product_slider type="sale" limit="12" columns="4" title="Aktualne akce" arrows="yes"]Automaticky scrollovany slider bestselleru:
[polski_product_slider type="bestsellers" limit="10" autoplay="yes" autoplay_speed="4000"]Stylovani CSS
Section titled “Stylovani CSS”.polski-slider- kontejner slideru.polski-slider__track- cesta scrollu.polski-slider__item- karta produktu.polski-slider__arrow- sipka navigace.polski-slider__arrow--prev- sipka vlevo.polski-slider__arrow--next- sipka vpravo.polski-slider__dots- kontejner tecek strankovani.polski-slider__dot- jednotliva tecka.polski-slider__dot--active- aktivni tecka.polski-slider__title- hlavicka
Reseni problemu
Section titled “Reseni problemu”Slider nescrolluje plynule - ujistete se, ze prohlizec podporuje scroll-snap-type. Vsechny moderni prohlizece (Chrome 69+, Firefox 68+, Safari 11+) tuto vlastnost podporuji.
Sipky nefunguji - zkontrolujte, zda na strance neni CSS konflikt s jinym sliderem.
Autoplay se nezastavuje - ujistete se, ze JavaScript neni blokovan optimalizacnim pluginem.
Hlaseni problemu: github.com/wppoland/polski/issues