Dynamiczny licznik slajdów karuzeli

Treść zadania

Mamy tablicę slajdów:
const fotki = ["1.jpg", "2.jpg", "3.jpg", "4.jpg"]; let pos = 0;
W dokumencie znajduje się <p id="licznikSlajdu">Zdjęcie 1 z 4</p> oraz przycisk <button id="btnNastepnaFotka">Następna</button>.
Napisz kod: po kliknięciu przycisku zwiększaj pos o 1 (jeśli osiągnie koniec, zresetuj do 0) i zaktualizuj treść akapitu na: 'Zdjęcie ' + (pos + 1) + ' z ' + fotki.length.

Co będzie oceniane

Zarządzanie indeksem slajdu z zapętleniem.
Prawidłowe formatowanie 'Zdjęcie X z N'.
Wpisanie 'Zdjęcie 2 z 4' po pierwszym kliknięciu.
Kod uruchamia się bez błędu i przechodzi wszystkie testy automatyczne.

Testy automatyczne (1)

Przejście na drugie zdjęcie i aktualizacja licznika — tekst #licznikSlajdu = Zdjęcie 2 z 4

Zaliczenie: wszystkie testy muszą przejść. Testy uruchamia się przyciskiem „Sprawdź testy” pod kodem.

const fotki = ["1.jpg", "2.jpg", "3.jpg", "4.jpg"];
let pos = 0;

// Aktualizuj #licznikSlajdu po kliknięciu #btnNastepnaFotka

Wskazówki

Wskazówka 1

Użytkownicy liczą elementy od 1, podczas gdy tablice indeksowane są od 0, dlatego do numeru pozycji dodajemy jeden.

Wskazówka 2

Zwiększ zmienną pozycji, obsłuż zapętlenie do zera, po czym połącz teksty informacyjne z przeliczonym numerem i łączną długością tablicy fotek.