[im3] ⭐ Popularne kategorie ⭐

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.

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

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.

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.

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.

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.