Jak zrobić bardzo prostą galerię w JavaScript

Aby stworzyć bardzo prostą galerię zdjęć w JavaScript, możesz skorzystać z poniższego przykładu. Założenie jest takie, że mamy zbiór obrazków, które będą wyświetlane jeden po drugim za pomocą przycisków „następny” i „poprzedni”.

Krok 1: HTML

Najpierw stwórz strukturę HTML, która będzie zawierała obraz i przyciski do nawigacji.

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prosta galeria</title>
    <style>
        /* Podstawowy styl dla galerii */
        #gallery {
            max-width: 600px;
            margin: 0 auto;
            text-align: center;
        }
        img {
            width: 100%;
            height: auto;
        }
        button {
            margin: 10px;
            padding: 10px 20px;
            cursor: pointer;
        }
    </style>
</head>
<body>

    <div id="gallery">
        <img id="galleryImage" src="img1.jpg" alt="Galeria">
        <div>
            <button id="prevBtn">Poprzedni</button>
            <button id="nextBtn">Następny</button>
        </div>
    </div>

    <script src="script.js"></script>

</body>
</html>

Krok 2: JavaScript

W pliku script.js dodajemy funkcjonalność zmiany obrazków.

// Tablica z obrazkami
const images = ['img1.jpg', 'img2.jpg', 'img3.jpg'];

// Indeks aktualnie wyświetlanego obrazka
let currentImageIndex = 0;

// Element img w HTML
const galleryImage = document.getElementById('galleryImage');

// Funkcja do zmiany obrazka
function updateImage() {
    galleryImage.src = images[currentImageIndex];
}

// Event listener na przycisk "Następny"
document.getElementById('nextBtn').addEventListener('click', function() {
    currentImageIndex++;
    if (currentImageIndex >= images.length) {
        currentImageIndex = 0; // Wracamy do pierwszego obrazka
    }
    updateImage();
});

// Event listener na przycisk "Poprzedni"
document.getElementById('prevBtn').addEventListener('click', function() {
    currentImageIndex--;
    if (currentImageIndex < 0) {
        currentImageIndex = images.length - 1; // Wracamy do ostatniego obrazka
    }
    updateImage();
});

Wyjaśnienie:

HTML:
- Mamy tutaj <img> do wyświetlania obrazków, a także dwa przyciski: „Poprzedni” i „Następny”.
- Stylizacja jest bardzo prosta, tak aby obrazek był wycentrowany i dostosowany do szerokości kontenera.
JavaScript:
- Zmienna images przechowuje ścieżki do obrazków.
- Zmienna currentImageIndex śledzi, który obrazek aktualnie wyświetlamy.
- Funkcja updateImage() aktualizuje obrazek w galerii, przypisując nowy obrazek do elementu <img>.
- Dwa event listenery do obsługi przycisków nawigacyjnych, które zmieniają indeks obrazka i wywołują funkcję updateImage().

Krok 3: Obrazy

Upewnij się, że masz obrazy o nazwach img1.jpg, img2.jpg, img3.jpg w katalogu, w którym przechowujesz projekt.

Gotowe! Po otwarciu tego pliku w przeglądarce, będziesz mógł przełączać się między obrazkami za pomocą przycisków.