Slider (inaczej: karuzela, pokaz slajdów) to bardzo popularny element na stronach internetowych, służący do prezentowania obrazów, tekstów lub innych treści w dynamiczny i przyciągający uwagę sposób. Jego implementacja może być realizowana na różne sposoby, począwszy od bardzo prostych struktur HTML i CSS, po zaawansowane komponenty sterowane JavaScriptem.
Prosty slider w HTML i CSS
Najprostszą formą slidera jest statyczny układ HTML oraz prosta obsługa widoczności slajdów przy użyciu CSS lub minimalnego JavaScriptu. Poniżej przykład takiego komponentu:
<div class="slider"> <div class="slide active"> <img src="obraz1.jpg" alt="Opis obrazu 1"> <div class="caption">Opis slajdu 1</div> </div> <div class="slide"> <img src="obraz2.jpg" alt="Opis obrazu 2"> <div class="caption">Opis slajdu 2</div> </div> <div class="slide"> <img src="obraz3.jpg" alt="Opis obrazu 3"> <div class="caption">Opis slajdu 3</div> </div> <button class="prev">❮</button> <button class="next">❯</button> </div> .slider { position: relative; width: 600px; height: 350px; overflow: hidden; } .slide { display: none; position: absolute; width: 100%; height: 100%; } .slide.active { display: block; } button.prev, button.next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.5); color: white; border: none; font-size: 2em; cursor: pointer; z-index: 2; } button.prev { left: 10px; } button.next { right: 10px; } .caption { position: absolute; bottom: 10px; left: 20px; color: #fff; background: rgba(0,0,0,0.4); padding: 10px; } Dodanie JavaScriptu – obsługa przełączania slajdów
Aby slider był dynamiczny i pozwalał użytkownikowi na zmianę slajdów (np. strzałkami), warto dołączyć prosty skrypt:
const slides = document.querySelectorAll('.slide'); const next = document.querySelector('.next'); const prev = document.querySelector('.prev'); let current = 0; function reset() { slides.forEach(slide => slide.classList.remove('active')); } function showSlide(index) { reset(); slides[index].classList.add('active'); } function nextSlide() { current = (current + 1) % slides.length; showSlide(current); } function prevSlide() { current = (current - 1 + slides.length) % slides.length; showSlide(current); } next.addEventListener('click', nextSlide); prev.addEventListener('click', prevSlide); // Inicjalizacja showSlide(current); Krótka analiza działania
- Wszystkie slajdy są na początku ukryte przez
display: none, - klasa
.activepokazuje aktywny slajd, - funkcje
nextSlide()orazprevSlide()zmieniają wyświetlany slajd, umożliwiając przechodzenie do przodu i do tyłu, - obsługa inicjalizacji ustawia pierwszy slajd jako widoczny po załadowaniu strony.
Automatyczna zmiana slajdów (autoplay)
Aby slider samodzielnie zmieniał slajdy co zadany czas, wystarczy dodać:
setInterval(nextSlide, 4000); // zmiana co 4 sekundy Ten wiersz można dodać pod inicjalizacją slidera.
Przykłady zastosowań slidera
Slider znajduje szerokie zastosowanie w nowoczesnych serwisach internetowych:
- Galerie zdjęć – prezentacja portfolio fotograficznego czy produktu;
- Prezentacje ofert – zmieniające się banery reklamowe;
- Opinie klientów – wyświetlanie recenzji i cytatów zadowolonych użytkowników;
- Slider treści – sekcje z tekstami, na przykład promocje lub wiadomości dnia.
Rozszerzenia i zaawansowane opcje
Slider można dowolnie rozbudowywać, np. o:
- nawigację w postaci kropek („pager”),
- swiping na urządzeniach mobilnych,
- animacje przejścia (fade, slide),
- dynamiczne generowanie slajdów na podstawie danych.
Przy bardziej zaawansowanych potrzebach warto rozważyć gotowe biblioteki (np. Swiper, Slick, Glide), które oferują duże możliwości rozbudowy i personalizacji działania slidera.
Stworzenie slidera w HTML, CSS i JavaScript jest zadaniem dostosowanym zarówno dla początkujących, jak i zaawansowanych twórców stron. Powyższa analiza krok po kroku pokazuje cały proces budowy prostego slidera, który łatwo można rozwinąć o kolejne funkcje wedle wymagań projektu.
