shadow
Carousel je element, ktorý zobrazuje viacero položiek, ako sú obrázky alebo aktualizácie noviniek, rotujúcim spôsobom.
Ukážka ukazuje najjednoduchší carousel s niekoľkými slidmi a predvoleným ovládaním. Sledujte hlavne základné správanie prechodu medzi položkami.
Ukážka zapína pagination prvky, aby bolo jasné, ako sa používateľ môže presúvať medzi slidmi aj bez gest alebo šípok.
Ukážka vypína nekonečné cyklenie. Vďaka tomu prvý a posledný slide fungujú ako skutočné hranice karuselu.
Ukážka vkladá carousel do dialógu, takže je dobre vidieť správanie komponentu v obmedzenom priestore overlayu.
Ukážka dopĺňa carousel o náhľadové miniatúry, ktoré fungujú ako sekundárna navigácia medzi slidmi.
Ukážka pracuje s rozostupmi medzi slidmi a okolo viewportu, aby bolo vidieť, ako sa mení rytmus a hustota layoutu.
Ukážka používa slide-per-page="5", takže carousel na jednom viewporte zobrazí presne päť sibling itemov. Šírka sa počíta aj s gapom medzi itemami, takže päť kariet spolu vyplní 100 % šírky bez overflowu. Pri klasickom loop sa po poslednom plnom view carousel vráti späť na začiatok.
Ak pridáte continuous-loop, viac-itemový carousel sa na hranách správa ako nekonečný pás. Za 10 tak môžeš vidieť 1 2 3 4, namiesto okamžitého skoku späť na prvý plný view.
Ukážka necháva slide-per-page="1" a do jedného wje-carousel-item vkladá vlastný grid s piatimi kartami. Wrapper sa natiahne na plnú šírku slide-u bez potreby fixnej šírky carouselu alebo dodatočných width hackov v aplikácii.
Ukážka rozdeľuje priestor tak, aby bolo naraz vidieť viac slidov. Hodí sa pre galérie alebo prehľady s vyššou informačnou hustotou.
Použite wje-carousel na zobrazenie obsahu, ktorý zlepšuje čitateľnosť, skenovateľnosť alebo kontext informácií.
Nepoužívajte ho ako náhradu za štruktúrované dáta tam, kde je potrebná presná interakcia.
Doplňte alternatívny text pre obrázky, čitateľné kontrasty a textové ekvivalenty pre ikony bez popisu.
Odporúčané postupy
- Komprimujte médiá a používajte lazy loading pri veľkých zoznamoch.
- Pri kartách a zoznamoch držte konzistentné informačné priority.
- Neopakujte rovnakú informáciu súčasne textom aj ikonou bez pridanej hodnoty.
| Popis | Nastavuje číselnú hodnotu používanú vo voľbe active-slide. |
| Atribút | active-slide |
| Typ | number｜number |
| Predvolené | 0 |
| Popis | Určuje, či je voľba continuous-loop zapnutá a ovplyvňuje správanie komponentu. |
| Atribút | continuous-loop |
| Typ | boolean |
| Predvolené | false |
| Popis | Určuje, či je voľba loop zapnutá a ovplyvňuje správanie komponentu. |
| Atribút | loop |
| Typ | boolean |
| Predvolené | false |
| Popis | Určuje, či je voľba navigation zapnutá a ovplyvňuje správanie komponentu. |
| Atribút | navigation |
| Typ | boolean |
| Predvolené | false |
| Popis | Určuje, či je voľba pagination zapnutá a ovplyvňuje správanie komponentu. |
| Atribút | pagination |
| Typ | boolean |
| Predvolené | false |
slidePerPage
| Popis | Nastavuje číselnú hodnotu používanú vo voľbe slide-per-page. |
| Atribút | slide-per-page |
| Typ | number |
| Predvolené | 1 |
| Popis | Určuje, či je voľba thumbnails zapnutá a ovplyvňuje správanie komponentu. |
| Atribút | thumbnails |
| Typ | boolean |
| Predvolené | false |
Pre tento komponent nie sú dostupné žiadne udalosti.
| Popis | Synchronizuje active to snap start s externým alebo interným zdrojom stavu. |
| Signatúra | () => void |
| Popis | Synchronizuje slide metrics s externým alebo interným zdrojom stavu. |
| Signatúra | () => void |
| Popis | Vráti scroll padding inline start z aktuálneho stavu komponentu. |
| Signatúra | () => number |
| Popis | Vráti control behavior z aktuálneho stavu komponentu. |
| Signatúra | () => ScrollBehavior｜string |
| Popis | Spustí metódu goToSlide na vykonanie logiky komponentu a aktualizáciu jeho stavu. |
| Signatúra | (index: any, behavior: any, next: any) => void |
| Popis | Nastaví active visual slide a aplikuje súvisiace zmeny stavu. |
| Signatúra | (vIndex: number) => void |
| Popis | Vytvorí loop clone a pripojí ho do štruktúry komponentu. |
| Signatúra | (item: HTMLElement) => HTMLElement |
| Popis | Odstráni loop clones z aktuálneho stavu komponentu. |
| Signatúra | () => void |
| Popis | Vráti loop clone count z aktuálneho stavu komponentu. |
| Signatúra | (totalSlides: number) => number |
| Popis | Spustí metódu scrollToVisualIndex na vykonanie logiky komponentu a aktualizáciu jeho stavu. |
| Signatúra | (vIndex: number, behavior: ScrollBehavior｜string) => void |
| Popis | Spustí metódu nextSlide na vykonanie logiky komponentu a aktualizáciu jeho stavu. |
| Signatúra | () => void |
| Popis | Spustí metódu previousSlide na vykonanie logiky komponentu a aktualizáciu jeho stavu. |
| Signatúra | () => void |
| Popis | Vráti slides z aktuálneho stavu komponentu. |
| Signatúra | () => Array |
| Popis | Vráti max visible start index z aktuálneho stavu komponentu. |
| Signatúra | (totalSlides: number) => number |
| Popis | Spustí metódu normalizeLoopIndex na vykonanie logiky komponentu a aktualizáciu jeho stavu. |
| Signatúra | (index: number, totalSlides: number) => number |
| Popis | Vráti loop logical count z aktuálneho stavu komponentu. |
| Signatúra | (totalSlides: number) => number |
| Popis | Vráti pagination indexes z aktuálneho stavu komponentu. |
| Signatúra | () => number[] |
| Popis | Spustí metódu canGoNext na vykonanie logiky komponentu a aktualizáciu jeho stavu. |
| Signatúra | () => boolean |
| Popis | Spustí metódu canGoPrevious na vykonanie logiky komponentu a aktualizáciu jeho stavu. |
| Signatúra | () => boolean |
Pre tento komponent nie sú dostupné žiadne CSS časti tieňa.
| Názov | Popis |
|---|
--wje-carousel-size | Vlastná CSS premenná na štýlovanie komponentu (size). |
--wje-carousel-gap | Vlastná CSS premenná, ktorá riadi gap. |
| Názov | Popis |
|---|
default | Predvolený slot pre hlavný obsah komponentu. |