Nawigacja punktowa (kropki) w karuzeli
Treść zadania
W karuzeli zdefiniowano tablicę const slajdy = ["foto0.jpg", "foto1.jpg", "foto2.jpg"];.
W dokumencie umieszczono obrazek <img id="podgladKropek" src="foto0.jpg" alt="Podgląd">, akapit <p id="nrKropki">Slajd 0</p> oraz trzy przyciski:<button id="kropka0">1</button>, <button id="kropka1">2</button>, <button id="kropka2">3</button>.
Napisz obsługę: po kliknięciu #kropka1 ustaw src = slajdy[1] i treść akapitu na 'Slajd 1'; po kliknięciu #kropka2 ustaw src = slajdy[2] i akapit na 'Slajd 2'.
Co będzie oceniane
- Obsługa kliknięć przycisków punktowych.
- Ustawienie odpowiedniego src z tablicy slajdy.
- Wpisanie 'Slajd 1' lub 'Slajd 2' do #nrKropki.
- Kod uruchamia się bez błędu i przechodzi wszystkie testy automatyczne.
Testy automatyczne (2)
- Skok do slajdu nr 1 po kliknięciu kropka1 — atrybut #podgladKropek = foto1.jpg; tekst #nrKropki = Slajd 1
- Skok do slajdu nr 2 po kliknięciu kropka2 — atrybut #podgladKropek = foto2.jpg; tekst #nrKropki = Slajd 2
Zaliczenie: wszystkie testy muszą przejść. Testy uruchamia się przyciskiem „Sprawdź testy” pod kodem.
const slajdy = ["foto0.jpg", "foto1.jpg", "foto2.jpg"];
// Zaprogramuj skok do slajdu po kliknięciu przycisków #kropka1 i #kropka2
Wskazówki
Wskazówka 1
Kropki nawigacyjne pozwalają na natychmiastowy skok do konkretnego indeksu bez konieczności przewijania sekwencyjnego.
Wskazówka 2
Podepnij pod przyciski numeryczne funkcje ustawiające na stałe wskazany indeks z tablicy slajdów i uaktualniające źródło obrazka oraz etykietę tekstową.