Jak stworzyć rotator banerów na stronę?

Chcesz ożywić swoją stronę internetową i przyciągnąć uwagę odwiedzających? Rotator banerów to świetny sposób na zaprezentowanie wielu informacji w ograniczonej przestrzeni. W dodatku, taki element dodaje dynamiki i sprawia, że strona wygląda bardziej profesjonalnie. Dziś pokażę Ci krok po kroku, jak stworzyć własny rotator banerów. Bez paniki – nie trzeba być programistą, żeby to ogarnąć!

Dlaczego warto mieć rotator banerów?

Zanim przejdziemy do kodowania, warto zastanowić się, dlaczego rotator banerów jest przydatny:

Oszczędność miejsca – zamiast wstawiać kilka statycznych grafik, możesz umieścić je w jednym miejscu i je przewijać.
Zwiększenie zaangażowania – animowane elementy bardziej przyciągają wzrok.
Promocja wielu ofert – to świetne narzędzie do prezentowania ofert specjalnych, produktów czy informacji.

Co będziesz potrzebować?

Przede wszystkim potrzebujesz trzech rzeczy:

HTML – do stworzenia struktury banerów.
CSS – żeby to wyglądało przyzwoicie.
JavaScript – do dodania animacji.

Możesz też skorzystać z bibliotek, takich jak jQuery lub Swiper.js, ale dziś pokażę Ci, jak zrobić to samodzielnie, od zera.

Krok 1: Struktura HTML

Najpierw stwórzmy podstawową strukturę dla rotatora. Otwórz plik HTML i wklej poniższy kod:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rotator banerów</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="rotator">
        <div class="banner">
            <img src="baner1.jpg" alt="Baner 1">
        </div>
        <div class="banner">
            <img src="baner2.jpg" alt="Baner 2">
        </div>
        <div class="banner">
            <img src="baner3.jpg" alt="Baner 3">
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

Co tu się dzieje?

Mamy kontener .rotator, który trzyma wszystkie banery.
Każdy baner to osobny element .banner, w którym umieszczamy obrazek.

Krok 2: Stylizacja CSS

Czas na stylowanie. Dodaj plik style.css i wklej poniższy kod:

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f4f4f4;
}

.rotator {
    position: relative;
    width: 80%;
    max-width: 800px;
    height: 300px;
    overflow: hidden;
    border: 2px solid #ddd;
    border-radius: 10px;
}

.banner {
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    transition: left 0.5s ease-in-out;
}

.banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.banner.active {
    left: 0;
}

Co tu zrobiłem?

Stylizacja kontenera – .rotator to nasze „okno” na banery.
Pozycjonowanie banerów – każdy .banner zaczyna poza ekranem (po lewej stronie).
Animacja – klasa .active przesuwa baner na ekran.

Krok 3: Animacja w JavaScript

Teraz dodamy trochę magii za pomocą JavaScriptu. W pliku script.js wklej ten kod:

let currentIndex = 0;

const banners = document.querySelectorAll('.banner');

function showNextBanner() {
    // Ukryj aktualny baner
    banners[currentIndex].classList.remove('active');

    // Przejdź do następnego banera
    currentIndex = (currentIndex + 1) % banners.length;

    // Pokaż kolejny baner
    banners[currentIndex].classList.add('active');
}

// Uruchom rotator co 3 sekundy
setInterval(showNextBanner, 3000);

// Pokaż pierwszy baner od razu
banners[currentIndex].classList.add('active');

Jak to działa?

Wybieramy wszystkie banery – za pomocą querySelectorAll.
Ukrywamy aktualny baner – przez usunięcie klasy active.
Przechodzimy do kolejnego – zmieniamy indeks i dodajemy klasę active do następnego banera.
Automatyczna zmiana – funkcja setInterval wywołuje showNextBanner co 3 sekundy.

Dodatkowe ulepszenia

Jeśli chcesz jeszcze bardziej podkręcić rotator, oto kilka pomysłów:

1. Przyciski „Dalej” i „Wstecz”

Dodaj przyciski do manualnego przełączania banerów:

<div class="rotator">
    ...
    <button id="prev">Wstecz</button>
    <button id="next">Dalej</button>
</div>

W script.js:

document.getElementById('prev').addEventListener('click', () => {
    banners[currentIndex].classList.remove('active');
    currentIndex = (currentIndex - 1 + banners.length) % banners.length;
    banners[currentIndex].classList.add('active');
});

document.getElementById('next').addEventListener('click', showNextBanner);

2. Kropki nawigacyjne

Dodaj wskaźniki:

<div class="dots">
    <span class="dot" data-index="0"></span>
    <span class="dot" data-index="1"></span>
    <span class="dot" data-index="2"></span>
</div>

I w script.js:

const dots = document.querySelectorAll('.dot');

dots.forEach(dot => {
    dot.addEventListener('click', (e) => {
        banners[currentIndex].classList.remove('active');
        currentIndex = parseInt(e.target.dataset.index);
        banners[currentIndex].classList.add('active');
    });
});

Rotator banerów to świetny dodatek, który możesz zrobić samodzielnie, nawet jeśli dopiero zaczynasz z kodowaniem. Wystarczy trochę HTML, CSS i JavaScriptu, a Twoja strona zyska dynamiczny element, który przyciągnie uwagę odwiedzających.