shadow
A Carousel is an element that displays multiple items, such as images or news updates, in a rotating fashion.
The demo shows the simplest carousel with a few slides and default controls. Observe especially the basic behavior of the transition between items.
The demo turns on pagination elements to make it clear how the user can move between slides even without gestures or arrows.
The demonstration turns off infinite cycling. This makes the first and last slide function as the actual borders of the carousel.
The sample inserts a carousel into the dialog, so it is good to see the behavior of the component in the limited space of the overlay.
The preview adds thumbnails to the carousel, which act as secondary navigation between slides.
The demo works with spacing between slides and around the viewport to see how the rhythm and density of the layout changes.
Five slides per page
The sample uses slide-per-page="5", so that the carousel displays exactly five sibling items on one viewport. The width is also calculated with the gap between items, so five cards together fill 100% of the width without overflow. In a classic loop the carousel returns to the beginning after the last full view.
If you add continuous-loop, the multi-item carousel behaves like an infinite strip on the edges. So after 10 you can see 1 2 3 4, instead of immediately jumping back to the first full view.
The sample leaves slide-per-page="1" and inserts a custom five-card grid into a single wje-carousel-item. The wrapper stretches to the full width of the slide without the need for a fixed carousel width or additional width hacks in the application.
The preview divides the space so that multiple slides can be seen at once. Suitable for galleries or reports with higher information density.
Use wje-carousel to display content that improves the readability, scannability, or context of the information.
Do not use it as a substitute for structured data where precise interaction is needed.
Add alternative text for images, legible contrasts and text equivalents for icons without description.
- Compress media and use lazy loading for large lists.
- Keep information priorities consistent for tabs and lists.
- Do not repeat the same information in text and icon at the same time with no added value.
| 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 |
No events available for this component.
| 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 | () => 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: 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. |
| Name | Description |
|---|
default | Default slot for the main component content. |