iModules — Szablon Tulio
[im3] ⭐ Popularne kategorie ⭐
Slider popularnych kategorii z trzema wariantami karuzeli, opcjonalną nawigacją, auto-scrollem oraz tłem kafelków z animowanym efektem hover.
Do czego służy moduł?
Popularne kategorie wyświetlają klikalne grafiki kategorii w sliderze. Każdy element składa się z grafiki, nazwy oraz opcjonalnego linku prowadzącego do odpowiedniej kategorii.

Najczęstszy układJeżeli chcesz pokazać kilka kategorii obok siebie, wybierz wariant Wiele slajdów. Moduł sam zmienia liczbę widocznych elementów wraz z szerokością ekranu.

Jak skonfigurować popularne kategorie?
W sekcji Slajdy dodaj kategorie i ustaw dla każdej grafikę, nazwę oraz link.
Wybierz Styl karuzeli.
W razie potrzeby włącz nawigację lub auto-scroll.
Jeżeli chcesz uzyskać kafelki z tłem, włącz Dodaj tło pod grafiką i ustaw kolor, zaokrąglenie oraz efekt hover.

Konfigurator i podgląd na żywo
Poniższy symulator odwzorowuje pola z aktualnego config.json oraz zachowanie wynikające z Twig/CSS. Wszystkie widoczne ustawienia wpływają na output modułu, dlatego są oznaczone jako LIVE.

Interaktywny podgląd
Interaktywny symulator jest dostępny w pełnym widoku instrukcji. Wersja dla czytników AI pomija kod i dane symulatora, aby dokument pozostał lekki.
Warianty karuzeli
WariantDziałanie
Jeden slajdWyświetla po jednym elemencie, z pętlą i opcjonalną nawigacją.
Jeden slajd (minimalistyczny)Również jeden element, ale bez dodatkowego paddingu/gapu wariantu standardowego.
Wiele slajdów1 element na małym ekranie, 2 od 768 px, 3 od 1200 px i 4 od 1920 px.
Tło kafelka i efekt hover
Po włączeniu tła moduł dodaje warstwę pod grafiką. Zaokrąglenie 50% daje okrągłe tło. Przy najechaniu źródłowy CSS animuje obramowanie wokół kafelka za pomocą conic-gradient; jego kolor i grubość ustawisz osobno.

Responsywność
W wariancie Wiele slajdów liczba elementów w rzędzie jest sterowana bezpośrednio przez konfigurację slidera: 1 na mobile, 2 od 768 px, 3 od 1200 px i 4 od 1920 px. Pozostałe dwa warianty pracują po jednym slajdzie.

Szczegóły techniczne
Moduł korzysta z natywnego komponentu h-slider Shopera. Tylko aktywne elementy z listy grafik są renderowane. Pole Klasa CSS jest emitowane zarówno na wrapperze modułu, jak i na photo-slider. JS modułu nie buduje własnego slidera — jedynie oznacza znalezione instancje klasą gotowości po inicjalizacji oraz po zdarzeniu PageManager.loaded.