iModules — Szablon COSMO
[im3] ⭐ Nowy slider z nawigacją ⭐
Responsywny slider graficzny z tekstową nawigacją, opcjonalnymi strzałkami na desktopie oraz automatycznym przewijaniem.
Do czego służy moduł?
Nowy slider z nawigacją wyświetla serię klikalnych grafik w jednym sliderze. Klient może przełączać slajdy przez tekstową nawigację pod grafiką oraz — na desktopie — strzałkami po bokach.

Jedna grafika na wszystkie urządzeniaW tej wersji modułu każdy slajd ma jedno pole Obraz. Aktualny Twig używa tej samej grafiki na desktopie i mobile; na mniejszym ekranie obraz skaluje się responsywnie.

Jak przygotować slajdy?
W sekcji Slajdy dodaj grafikę.
Uzupełnij Nazwę slajdu — będzie widoczna w nawigacji tekstowej.
Opcjonalnie wpisz Link URL, tytuł grafiki i tekst ALT.
Zostaw włączony przełącznik Aktywny slajd dla pozycji, które mają być widoczne.

Konfiguracja modułu
Poniżej możesz przećwiczyć konfigurację niemal tak samo jak w edytorze Shopera. Zmiany pól oznaczonych Live są nanoszone bezpośrednio na podgląd po prawej stronie.

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.
Nawigacja i automatyczne przewijanie
Nawigacja tekstowa tworzy pod sliderem zakładki z nazw slajdów. Aktywna zakładka ma podkreślenie w wybranym kolorze. Strzałki działają na desktopie i są ukrywane na małych ekranach zgodnie z klasami użytymi w źródle modułu.
Po włączeniu Auto-scroll ustaw czas wyświetlania jednego slajdu na co najmniej 3 sekundy. Ręczne kliknięcie nawigacji lub strzałki zatrzymuje bieżący cykl i uruchamia go ponownie.

Kolor tła aktywnego elementuTo pole występuje w konfiguracji, ale obecny kod modułu nie używa jego wartości. Aktywna zakładka ma w CSS wpisane na stałe tło #fafafa. Dlatego w symulatorze pole jest oznaczone jako Konfiguracja, a nie Live.

Szybki test po konfiguracji
Sprawdź, czy każdy aktywny slajd ma grafikę.
Kliknij nazwy w nawigacji i upewnij się, że otwierają właściwe slajdy.
Na desktopie sprawdź obie strzałki.
Przełącz podgląd na Mobile i upewnij się, że grafika jest czytelna, a nawigację można przewijać poziomo.
Jeśli używasz autoplay, odczekaj ustawiony czas i sprawdź automatyczną zmianę slajdu.

Szczegóły techniczne
Moduł renderuje aktywne slajdy w poziomym kontenerze ze scroll-snap. JavaScript synchronizuje pozycję grafiki, aktywną zakładkę oraz widoczność strzałek. Autoplay korzysta z atrybutu autoplay i data-interval, a przy ustawieniu systemowym prefers-reduced-motion: reduce nie jest uruchamiany.