[im3] ⭐ Nowy slider z nawigacją ⭐
Responsywny slider graficzny z tekstową nawigacją, opcjonalnymi strzałkami na desktopie oraz automatycznym przewijaniem.
![Miniatura modułu: [im3] ⭐ Nowy slider z nawigacją ⭐](/crm/uploads/instructions/module-thumbnails/mod_4c72cb3e0075793c1662/thumbnail-b453f42bcf.png)
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.
W 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.
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.
To 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.