Czy zdarzyło Ci się kiedyś potrzebować zaprezentować galerię zdjęć lub filmów na stronie internetowej, nie zajmując przy tym zbyt wiele miejsca? A może chciałeś uatrakcyjnić swoją witrynę, dodając do niej interaktywne elementy?
Rozwiązaniem może być slider obrazów. W tym artykule wyjaśnimy, czym jest slider, jakie są wymagania wstępne do jego stworzenia oraz jak go zbudować, korzystając z HTML, JavaScript i CSS.
Czym jest suwak obrazów?
Suwaki, znane również jako karuzele lub pokazy slajdów, służą do wyświetlania tekstu, obrazów lub filmów. W tym artykule skupimy się na suwakach obrazów. Wielu twórców stron internetowych używa suwaków na stronach głównych do prezentowania ofert lub najważniejszych informacji.
Oto kilka powodów, dla których warto rozważyć użycie suwaków na swojej stronie:
- Zwiększenie wygody użytkownika: Dobra strona internetowa powinna być zwięzła, aby użytkownicy nie musieli przewijać strony w nieskończoność w poszukiwaniu istotnych treści. Jeśli masz dużo zdjęć, slider pozwoli uniknąć długiego przewijania, prezentując je w zgrabny sposób.
- Poprawa atrakcyjności wizualnej: Większość użytkowników internetu nie poświęca zbyt wiele czasu na zwykłe strony. Slider z animacjami może znacząco zwiększyć atrakcyjność wizualną Twojej witryny.
- Oszczędność przestrzeni: Gdy chcesz zaprezentować na stronie internetowej kilkanaście lub więcej zdjęć, może to zająć sporo miejsca. Slider pozwala zaoszczędzić przestrzeń, jednocześnie udostępniając wszystkie zdjęcia.
- Prezentacja dynamicznej treści: Suwaki mogą służyć do wyświetlania dynamicznej zawartości, takiej jak osadzone posty z mediów społecznościowych, wpisy blogowe czy aktualności.
Wymagania wstępne do stworzenia suwaka obrazów
- Podstawowa znajomość HTML: Będziemy omawiać strukturę suwaka. Powinieneś swobodnie posługiwać się znacznikami HTML, klasami i elementami div.
- Podstawowa znajomość CSS: Użyjemy CSS do ostylowania suwaka i jego elementów nawigacyjnych.
- Podstawowa znajomość JavaScript: JavaScript będzie nam potrzebny do zapewnienia responsywności slidera.
- Edytor kodu: Możesz użyć dowolnego edytora kodu. W tym przykładzie wykorzystamy Visual Studio Code.
- Zestaw zdjęć: Potrzebujesz przygotować pliki graficzne, które będą wyświetlane w sliderze.
Konfiguracja folderu projektu
Potrzebujesz folderu na projekt, folderu na zdjęcia oraz plików HTML, CSS i JavaScript. Nazwiemy nasz projekt „Image-Slider”. Możesz utworzyć foldery i pliki ręcznie lub skorzystać z tych komend:
mkdir Image-Slider
cd Image-Slider
mkdir Images && touch index.html style.css script.js
Dodaj wszystkie swoje zdjęcia do folderu „Images”, który utworzyliśmy w folderze projektu, a następnie przejdź do następnego kroku.
To jest przykładowy folder projektu, do którego dodałem sześć zdjęć. Cały kod HTML znajdzie się w pliku index.html.
Rodzaje suwaków obrazów
Możemy wyróżnić dwa główne typy suwaków obrazów: automatyczny slider i automatyczny slider z przyciskami.
#1. Automatyczny slider obrazów
Automatyczny slider automatycznie przechodzi do kolejnego obrazu po upływie określonego czasu, na przykład 3 sekund.
Kod HTML
Oto przykładowy kod HTML:
<html lang="pl"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Slider obrazów</title> <link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" /> </head> <body> <div id="slider"> <div class="slide"> <h2>Afrykański</h2> <img src="Images/img1.jpg" > </div> <div class="slide"> <h2>Amerykański</h2> <img src="Images/img2.jpg" > </div> <div class="slide"> <h2>Azjatycki</h2> <img src="Images/img3.jpg" > </div> <div class="slide"> <h2>Arabski</h2> <img src="Images/img4.jpg" > </div> <div class="slide"> <h2>Nowoczesny </h2> <img src="Images/img5.jpg" > </div> <div class="slide"> <h2>Europejski </h2> <img src="Images/img6.jpg" > </div> </div> <script src="script.js"></script> </body> </html>
Z tego kodu możemy zaobserwować:
- Plik CSS (styles.css) został zaimportowany do pliku index.html w sekcji <head>. Będzie on użyty w późniejszych krokach.
- Kod JavaScript został dodany do kodu HTML tuż przed zamykającym tagiem <body>. Użyjemy JavaScript do dodania funkcjonalności suwakowi.
- Każdy slajd ma klasę „slide”.
- Znacznik <img> służy do importowania zdjęć z folderu „Images”.
Stylizacja automatycznego slidera za pomocą CSS
Teraz możemy ostylować nasz slider, ponieważ mamy już połączone pliki CSS i HTML.
Dodaj ten kod do pliku CSS:
#slider { width: 80%; } .slide { width: 80%; display: none; position: relative; } .slide img { width: 80%; height: 80%; } .slide.active { display: block; }
Z tego kodu możemy zaobserwować:
- Ustawiliśmy szerokość i wysokość slidera na 80%.
- Aktywny slajd ma właściwość „display” ustawioną na „block”, co oznacza, że tylko aktywny slajd będzie widoczny, a pozostałe będą ukryte.
Dodanie JavaScript do obsługi responsywności slidera
Dodaj ten kod do pliku script.js:
var slides = document.querySelectorAll('.slide'); var currentSlide = 0; var slideInterval = setInterval(nextSlide,2000); function nextSlide() { slides[currentSlide].className="slide"; currentSlide = (currentSlide+1)%slides.length; slides[currentSlide].className="slide active"; }
Ten kod JavaScript wykonuje następujące czynności:
- Używamy selektora `document.querySelectorAll` do wybrania wszystkich elementów z klasą „slide”.
- Ustawiamy początkową wartość zmiennej `currentSlide` na 0.
- Ustawiamy `slideInterval` na 2000 (2 sekundy), co oznacza, że obrazy w sliderze będą zmieniać się co 2 sekundy.
- Kod `slides[currentSlide].className = 'slide’;` usuwa klasę „active” z aktualnego slajdu.
- Kod `currentSlide = (currentSlide + 1) % slides.length;` zwiększa indeks aktualnego slajdu.
- Kod `slides[currentSlide].className = 'slide active’;` dodaje klasę „active” do aktualnego slajdu.
Automatyczny slider działa w następujący sposób:
#2. Automatyczny slider z przyciskami
Stworzony przez nas slider automatycznie przełącza slajdy co 2 sekundy. Możemy teraz stworzyć slider, w którym użytkownicy będą mogli przejść do następnego slajdu, klikając przycisk, lub który będzie automatycznie przełączał slajdy co 3 sekundy, jeśli użytkownik nie będzie klikał przycisków.
Kod HTML
Możesz zmodyfikować zawartość pliku index.html w następujący sposób:
<html lang="pl"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Slider obrazów</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" /> <link rel="stylesheet" href="styles.css" /> </head> <body> <div class="container"> <div class="mySlides"> <img src="Images/img1.jpg" style="width:100% ; height:50vh" > </div> <div class="mySlides"> <img src="Images/img2.jpg" style="width:100% ; height:50vh"> </div> <div class="mySlides"> <img src="Images/img3.jpg" style="width:100% ; height:50vh"> </div> <div class="mySlides"> <img src="Images/img4.jpg" style="width:100% ; height:50vh"> </div> <div class="mySlides"> <img src="Images/img5.jpg" style="width:100% ; height:50vh"> </div> <a class="prev" onclick="plusSlides(-1)">❮</a> <a class="next" onclick="plusSlides(1)">❯</a> <div class="caption-container"> <p id="caption"></p> </div> <div class="row"> <div class="column"> <img class="demo cursor" src="Images/img1.jpg" style="width:100%" onclick="currentSlide(1)" > </div> <div class="column"> <img class="demo cursor" src="Images/img2.jpg" style="width:100%" onclick="currentSlide(2)" > </div> <div class="column"> <img class="demo cursor" src="Images/img3.jpg" style="width:100%" onclick="currentSlide(3)" > </div> <div class="column"> <img class="demo cursor" src="Images/img4.jpg" style="width:100%" onclick="currentSlide(4)" > </div> <div class="column"> <img class="demo cursor" src="Images/img5.jpg" style="width:100%" onclick="currentSlide(5)" > </div> </div> </div> <script src="script.js"></script> </body> </html>
Ten kod HTML działa w następujący sposób:
- Klasa „mySlides” zawiera pięć naszych zdjęć.
- Mamy dwa przyciski, „poprzedni” i „następny” z atrybutami `onClick`, umożliwiając użytkownikom przełączanie slajdów.
- Mamy miniatury, które prezentują zdjęcia w dolnej części strony.
Kod CSS
Dodaj ten kod do swojego pliku CSS:
* { box-sizing: border-box; } .container { position: relative; } .mySlides { justify-content: center; } .cursor { cursor: pointer; } .prev, .next { cursor: pointer; position: absolute; top: 40%; width: auto; padding: 16px; margin-top: -50px; color: rgb(34, 143, 85); font-weight: bold; font-size: 20px; border-radius: 0 3px 3px 0; user-select: none; -webkit-user-select: none; } .next { right: 0; border-radius: 3px 0 0 3px; } .prev:hover, .next:hover { background-color: rgba(0, 0, 0, 0.8); } .caption-container { text-align: center; background-color: orangered; padding: 2px 16px; color: white; } .row:after { content: ""; display: table; clear: both; } .column { float: left; width: 16.66%; } .demo { opacity: 0.6; } .active, .demo:hover { opacity: 1; }
Kod CSS działa w następujący sposób:
- Ustawiliśmy właściwość `display` klasy `.mySlides` na `none`, co oznacza, że domyślnie wszystkie slajdy są ukryte.
- Ustawiliśmy krycie miniaturek, na które najedziemy kursorem, na 1, zgodnie z regułą `.demo:hover {opacity: 1;}`.
Kod JavaScript
let slideIndex = 1; showSlides(slideIndex); function plusSlides(n) { showSlides(slideIndex += n); } function currentSlide(n) { showSlides(slideIndex = n); } let slideInterval = setInterval(() => { plusSlides(1); }, 3000); let slideshowContainer = document.getElementsByClassName('container')[0]; slideshowContainer.addEventListener('mouseenter', () => { clearInterval(slideInterval); }); slideshowContainer.addEventListener('mouseleave', () => { slideInterval = setInterval(() => { plusSlides(1); }, 3000); }); function showSlides(n) { let i; let slides = document.getElementsByClassName("mySlides"); let dots = document.getElementsByClassName("demo"); let captionText = document.getElementById("caption"); if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length} for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; captionText.innerHTML = dots[slideIndex-1].alt; }
Możesz pobrać kod źródłowy.
Nasz kod JavaScript wykonuje następujące czynności:
- Mamy funkcję `currentSlide`, która ma właściwość wyświetlania ustawioną na „none”. Ta reguła pozwala naszej stronie wyświetlać tylko bieżący slajd.
- Mamy funkcję `plusSlides`, która dodaje/odejmuje podaną wartość od zmiennej `slideIndex`, aby określić, który slajd ma być wyświetlony.
- Jeśli użytkownik nie kliknie przycisków, slajdy będą automatycznie przewijane co 3000 milisekund.
Jeśli użytkownik korzysta z przycisków nawigacyjnych, slider obrazów będzie działał w następujący sposób:
Jeśli użytkownik nie używa przycisków nawigacyjnych, slider obrazów będzie automatycznie przewijał się co 3 sekundy w następujący sposób:
Testowanie i debugowanie slidera
Błędy są nieodłącznym elementem procesu programowania i ich występowanie w kodzie nie oznacza, że jesteś złym programistą. Jeśli Twój kod nie działa poprawnie, pomimo wykonania powyższych kroków, możesz wypróbować poniższe metody testowania i debugowania, aby naprawić błędy:
- Debuguj każdy plik osobno: Nasz kod składa się z trzech plików: HTML, CSS i JavaScript. Każdy z tych języków ma swoją własną składnię. Możesz sprawdzić poprawność swoich kodów HTML, CSS i JavaScript, korzystając z narzędzi takich jak W3C Markup Validation Service dla kodu HTML, CSS Validator dla kodu CSS oraz Chrome DevTools do testowania kodu JavaScript.
- Przeprowadź różne rodzaje testów: Możesz wykonać testy wizualne, aby upewnić się, że obrazy są wyświetlane poprawnie, testy wydajności, aby sprawdzić, czy slider działa responsywnie, oraz testy funkcjonalne, aby upewnić się, że nawigacja po zdjęciach jest prawidłowa.
- Przetestuj kod z różnymi formatami i rozmiarami obrazów: Dobry slider obrazów powinien działać poprawnie z różnymi formatami i rozmiarami zdjęć.
- Zautomatyzuj testy: Automatyzacja odgrywa ważną rolę w procesie testowania. Możesz użyć narzędzi takich jak Selenium lub LoadRunner do pisania i wykonywania skryptów automatyzujących testy. Te narzędzia pozwalają również na ponowne wykorzystanie niektórych testów.
- Dokumentuj testy: Testowanie to ciągły proces. Może być konieczne ciągłe ulepszanie testów, dopóki kod nie będzie działał zgodnie z oczekiwaniami. Dokumentowanie tego procesu sprawi, że kod będzie bardziej przejrzysty i łatwiejszy do zrozumienia.
Slider obrazów: najlepsze praktyki
- Uprość: Suwaki są atrakcyjne, jednak warto ograniczyć liczbę zdjęć w sliderze. Idealna ilość to 4-7 obrazów na slajd.
- Przetestuj slider: Sprawdź poprawność działania slidera przed jego opublikowaniem.
- Stwórz responsywny slider: Upewnij się, że slider reaguje na różne rozmiary ekranu.
- Używaj wysokiej jakości zdjęć: Korzystaj ze zdjęć w wysokiej rozdzielczości. Zapisywanie obrazów w formacie SVG to świetne rozwiązanie, ponieważ nie tracą one na jakości przy zmianie rozmiaru.
- Zmień rozmiar zdjęć: Możesz mieć zdjęcia o różnych rozmiarach i formatach. Upewnij się, że zdjęcia w sliderze mają ten sam rozmiar. Możesz to osiągnąć za pomocą CSS.
Podsumowanie
Mamy nadzieję, że teraz jesteś w stanie stworzyć w pełni funkcjonalny slider obrazów, aby prezentować ważne treści na swojej stronie, bez konieczności korzystania z gotowych bibliotek interfejsu użytkownika. Możesz zastosować to samo podejście, aby tworzyć slider wideo na stronach internetowych.
newsblog.pl