Jak zrobić slider ze strzałkami, automatycznym przewijaniem i kropkami w html i css

Aby stworzyć slider ze strzałkami, automatycznym przewijaniem i kropkami, użyjemy HTML, CSS i JavaScriptu. Oto prosty przykład, który możesz zaimplementować na swojej stronie.

Krok 1: HTML

W strukturze HTML stworzymy kontener na slajdy, strzałki i kropki.

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Slider</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="slider">
        <div class="slides">
            <!-- Każdy slajd -->
            <div class="slide active">
                <img src="image1.jpg" alt="Image 1">
            </div>
            <div class="slide">
                <img src="image2.jpg" alt="Image 2">
            </div>
            <div class="slide">
                <img src="image3.jpg" alt="Image 3">
            </div>
        </div>

        <!-- Strzałki -->
        <button class="prev">&#10094;</button>
        <button class="next">&#10095;</button>

        <!-- Kropki -->
        <div class="dots">
            <span class="dot active"></span>
            <span class="dot"></span>
            <span class="dot"></span>
        </div>
    </div>

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

Krok 2: CSS

Stworzymy stylizację dla slidera, aby wyglądał dobrze, a także obsłużymy układ dla slajdów, strzałek i kropek.

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

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

.slider {
    position: relative;
    width: 80%;
    max-width: 800px;
    overflow: hidden;
    border-radius: 10px;
}

.slides {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.slide {
    min-width: 100%;
    transition: opacity 0.5s ease-in-out;
}

.slide img {
    width: 100%;
    border-radius: 10px;
}

.prev, .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 15px;
    cursor: pointer;
    border-radius: 50%;
    user-select: none;
}

.prev {
    left: 10px;
}

.next {
    right: 10px;
}

.dots {
    position: absolute;
    bottom: 10px;
    width: 100%;
    text-align: center;
}

.dot {
    height: 15px;
    width: 15px;
    margin: 0 5px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
    transition: background-color 0.3s;
}

.dot.active {
    background-color: white;
}

Krok 3: JavaScript

Tutaj napiszemy logikę, która będzie obsługiwać przewijanie slajdów za pomocą strzałek, kropek oraz automatyczne przewijanie.

const slides = document.querySelectorAll('.slide');
const dots = document.querySelectorAll('.dot');
const prev = document.querySelector('.prev');
const next = document.querySelector('.next');
let currentIndex = 0;
let autoSlideInterval;

// Funkcja do zmiany slajdu
function showSlide(index) {
    slides.forEach((slide, i) => {
        slide.classList.toggle('active', i === index);
        dots[i].classList.toggle('active', i === index);
    });
    currentIndex = index;
}

// Funkcja do zmiany na następny slajd
function nextSlide() {
    currentIndex = (currentIndex + 1) % slides.length;
    showSlide(currentIndex);
}

// Funkcja do zmiany na poprzedni slajd
function prevSlide() {
    currentIndex = (currentIndex - 1 + slides.length) % slides.length;
    showSlide(currentIndex);
}

// Automatyczne przewijanie
function startAutoSlide() {
    autoSlideInterval = setInterval(nextSlide, 3000); // 3000 ms = 3 sekundy
}

// Zatrzymanie automatycznego przewijania
function stopAutoSlide() {
    clearInterval(autoSlideInterval);
}

// Event listeners dla strzałek
next.addEventListener('click', () => {
    nextSlide();
    stopAutoSlide();
    startAutoSlide(); // Restart automatycznego przewijania po kliknięciu
});

prev.addEventListener('click', () => {
    prevSlide();
    stopAutoSlide();
    startAutoSlide();
});

// Event listener dla kropek
dots.forEach((dot, index) => {
    dot.addEventListener('click', () => {
        showSlide(index);
        stopAutoSlide();
        startAutoSlide();
    });
});

// Inicjacja automatycznego przewijania przy załadowaniu strony
startAutoSlide();

Opis działania:

HTML: Mamy kontener .slider, w którym umieściliśmy slajdy, strzałki do nawigacji oraz kropki wskazujące na aktywny slajd.
CSS: Stylizujemy slajdy, strzałki oraz kropki. Ustawiamy odpowiednie rozmiary i pozycje.
JavaScript: Logika slidera, obsługująca zmianę slajdów przez kliknięcie strzałek, kropek oraz automatyczne przewijanie co 3 sekundy.

To jest podstawowy slider, który możesz dostosować według swoich potrzeb, np. dodać więcej funkcji lub animacji.