Jak stworzyć suwak obrazu za pomocą JavaScript, aby wzmocnić swoją witrynę

Czy znalazłeś się kiedyś w sytuacji, w której chcesz wyświetlić kilka zdjęć/filmów w sekcji strony internetowej, ale nie chcesz zajmować dużo miejsca? Chcesz dodać interaktywność do swoich stron internetowych lub uatrakcyjnić je?

Suwak obrazu może oszczędzić Ci trudu. W tym artykule zdefiniujemy suwak obrazu, wymagania wstępne dotyczące tworzenia suwaka obrazu oraz sposób jego tworzenia za pomocą HTML, JavaScript i CSS.

Spis treści:

Co to jest suwak obrazu?

Suwaki to karuzele lub pokazy slajdów, które wyświetlają teksty, obrazy lub filmy. W tym artykule skupimy się na suwakach obrazu. Większość twórców stron internetowych używa suwaków na stronie głównej do promowania ofert lub najważniejszych informacji.

Oto kilka powodów, dla których powinieneś używać suwaków na swoich stronach internetowych.

Popraw wygodę użytkownika: idealna strona internetowa powinna być zwarta, aby użytkownicy końcowi nie musieli przewijać i przewijać, aby uzyskać ważne dane. Jeśli masz wiele obrazów, możesz oszczędzić użytkownikom kłopotów z przewijaniem, wyświetlając je na suwaku.
Atrakcyjność wizualna: większość użytkowników witryny nie spędzi dużo czasu na zwykłej stronie internetowej. Możesz poprawić atrakcyjność wizualną za pomocą suwaków i animacji.
Oszczędzaj miejsce: jeśli masz około 20 obrazów, które chcesz wyświetlić na swojej stronie internetowej, mogą one zajmować dużo miejsca. Utworzenie suwaka pozwoli zaoszczędzić miejsce i nadal umożliwi użytkownikom dostęp do wszystkich z nich.
Wyświetl dynamiczną zawartość: możesz użyć suwaków, aby wyświetlić dynamiczną zawartość, taką jak osadzone media społecznościowe, blogi i wiadomości.

Wymagania wstępne dotyczące tworzenia suwaka obrazu

Podstawowe zrozumienie HTML: Opiszemy tutaj strukturę slidera. Powinieneś czuć się komfortowo pracując z różnymi znacznikami HTML, klasami i elementami div.
Podstawowe zrozumienie CSS: Będziemy używać CSS do stylizowania naszych suwaków i przycisków graficznych.
Podstawowe zrozumienie JavaScript: Będziemy używać JavaScript, aby suwaki obrazu były responsywne.
Edytor kodu: Możesz użyć wybranego edytora kodu. Będę korzystał z Visual Studio Code.
Zbiór obrazów.

Skonfiguruj folder projektu

Potrzebujemy folderu projektu, znajdującego się w nim folderu obrazów oraz plików HTML, CSS i JavaScript. Nazwę swój projekt „Image-Slider”. Możesz utworzyć projekt ręcznie lub użyć tych poleceń, aby rozpocząć;

mkdir Image-Slider

Suwak obrazu cd

mkdir Obrazy && dotknij index.html style.css script.js

Dodaj wszystkie swoje obrazy do folderu „Obrazy”, który utworzyliśmy w folderze projektu i przejdź do następnego kroku.

To jest mój folder projektu, w którym dodałem sześć obrazów, których użyję do stworzenia slidera. Cały nasz kod HTML będzie w pliku index.html.

Rodzaje suwaków obrazu

Możemy mieć dwa rodzaje suwaków obrazu; automatyczny suwak i automatyczny suwak obrazu z przyciskami.

# 1. Automatyczny suwak obrazu

Suwak automatyczny przewija do następnego obrazu automatycznie po określonym czasie, np. 3 sekundach.

Kod HTML

To jest mój kod HTML;

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <link rel="stylesheet" href="https://wilku.top/how-to-create-image-slider-with-javascript-to-amp-up-your-website/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">
        <h1>African</h1>
      <img src="Images/img1.jpg" >
    </div>
    <div class="slide">
        <h1>American</h1>
      <img src="Images/img2.jpg" >
    </div>
    <div class="slide">
        <h1>Asian</h1>
      <img src="Images/img3.jpg" >
    </div>
    <div class="slide">
        <h1>Arabic</h1>
      <img src="Images/img4.jpg" >
    </div>
    <div class="slide">
        <h1>Modern </h1>
      <img src="Images/img5.jpg" >
    </div>
    <div class="slide">
        <h1> European </h1>
      <img src="Images/img6.jpg" >
    </div>
  </div>

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


</body>
</html>

Z tego kodu możemy zauważyć, co następuje;

Zaimportowałem mój plik CSS do pliku index.html w sekcji . Zostanie to użyte w późniejszych krokach.

Dodałem JavaScript do mojego kodu HTML tuż przed zamykającym tagiem . Użyję JavaScript, aby dodać funkcjonalność do suwaków.
Każdy slajd ma klasę slajdu.
Użyłem znacznika do zaimportowania obrazów z folderu Obrazy.

Stylizuj automatyczny suwak obrazu za pomocą CSS

Możemy teraz stylizować nasze obrazy, ponieważ mamy już połączone pliki CSS i HTML.

Dodaj ten kod do swojego 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 zauważyć, co następuje;

Mamy szerokość i wysokość naszego slidera do 80%
Ustawiliśmy aktywny slajd na blokowanie, co oznacza, że tylko aktywny slajd będzie wyświetlany, a pozostałe będą ukryte.

Jak dodać JavaScript, aby suwak obrazu był responsywny

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 JavaScript wykonuje następujące czynności;

Używamy selektora document.querySelectorAll do kierowania na wszystkie elementy z klasą slajdu.
Podajemy wartość początkową currentSlide 0.
Ustawiliśmy slideInterval na 2000 (2 sekundy), co oznacza, że obrazy w sliderze zmieniają się co 2 sekundy.
Ten kod się ślizga[currentSlide].className = 'slajd’; usuwa aktywną klasę z bieżącego slajdu
Ten kod currentSlide = (currentSlide + 1) % slides.length; zwiększa bieżący indeks slajdu.
Ten kod się ślizga[currentSlide].className = 'slajd aktywny’; dodaje aktywną klasę do bieżącego slajdu.

Automatyczny suwak działa w następujący sposób;

#2. Automatyczny suwak z przyciskami

Suwak obrazu, który stworzyliśmy, przewija się automatycznie co 2 sekundy. Możemy teraz utworzyć obraz, w którym użytkownicy mogą przejść do następnego slajdu, klikając przycisk lub automatycznie przewijać co 3 sekundy, jeśli użytkownik nie kliknie przycisków.

Kod HTML

Możesz zmienić zawartość swojego pliku index.html w następujący sposób;

<!DOCTYPE html>
<html lang="en">
  <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>Image Slider</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
    />
    <link rel="stylesheet" href="https://wilku.top/how-to-create-image-slider-with-javascript-to-amp-up-your-website/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;

Mamy klasę o nazwie mySlides, która zawiera nasze pięć obrazów.
Mamy dwa przyciski, „poprzedni” i „następny” z onClick, umożliwiając użytkownikom przewijanie slajdów.
Mamy miniaturę, która pokazuje obrazy w dolnej części strony internetowej.

kod CSS

Dodaj to do swojego kodu;

* {
  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ść wyświetlania klasy .mySlides na none, co oznacza, że domyślnie wszystkie slajdy są ukryte.
Ustawiliśmy krycie miniaturek, na które najeżdżamy kursorem, na 1, zgodnie z aktywną regułą .demo:hover {krycie: 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('slideshow-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ć ostateczny kod źródłowy tutaj.

Nasz kod JavaScript wykonuje następujące czynności;

Mamy funkcję currentSlide z wyświetlaną wartością ustawioną na brak. Ta reguła pozwala naszej stronie internetowej wyświetlać tylko bieżący slajd.
Mamy funkcję plusSlides, która dodaje/odejmuje podaną wartość od slideIndex, aby określić, który slajd ma zostać wyświetlony.
Jeśli użytkownik nie kliknie przycisków, slajdy będą automatycznie przewijane co 3000 milisekund.

Jeśli użytkownik korzysta z karty nawigacji, nasz suwak obrazu będzie działał w następujący sposób;

Jeśli użytkownik nie używa przycisków nawigacyjnych, suwak obrazu będzie automatycznie przewijany co 3 sekundy w następujący sposób;

Testuj i debuguj suwak obrazu

Błędy i pomyłki są częścią podróży programisty, a ich obecność w kodzie nie oznacza, że jesteś złym programistą. Jeśli Twój kod nie działa nawet po wykonaniu powyższych kroków, możesz wypróbować te opcje testowania i debugowania, aby naprawić błędy:

Debuguj każdy plik osobno: nasz kod składa się z trzech plików: plików HTML, CSS i JavaScript. Te trzy języki mają różne zasady. Możesz sprawdzić, czy Twoje kody HTML, CSS i JavaScript są prawidłowe, korzystając z narzędzi, takich jak W3C Markup Validation Service for HTML, CSS Validator for CSS code i Chrome DevTools do testowania kodu JavaScript.
Przeprowadzaj 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 obrazy są responsywne, oraz Testy funkcjonalne, aby upewnić się, że można nawigować po obrazach.
Przetestuj swój kod z różnymi formatami i rozmiarami obrazów: dobry suwak obrazu powinien działać z różnymi formatami i rozmiarami obrazów.
Zautomatyzuj swoje testy: automatyzacja jest wszędzie i Ty również możesz z niej skorzystać podczas testowania. Możesz używać narzędzi takich jak Selenium lub LoadRunner do pisania i wykonywania skryptów automatyzacji testów. Narzędzia te umożliwiają również ponowne wykorzystanie niektórych testów.
Udokumentuj swoje testy: Testowanie jest procesem ciągłym. Może być konieczne ciągłe ulepszanie testów, dopóki kod nie będzie działał zgodnie z oczekiwaniami. Udokumentuj ten proces, aby kod był czytelny i łatwy do odniesienia.

Suwaki obrazu: najlepsze praktyki

Upraszczaj: suwaki są atrakcyjne. Należy jednak zachować niską liczbę obrazów w suwaku. Coś w rodzaju 4-7 obrazów na slajd jest idealne.
Przetestuj swoje slidery: przetestuj je pod kątem funkcjonalności przed opublikowaniem w Internecie.
Twórz responsywne suwaki: upewnij się, że utworzone suwaki reagują na różne rozmiary ekranu.
Używaj obrazów wysokiej jakości: rób/pobieraj wysokiej jakości obrazy do swoich sliderów. Zapisywanie obrazów w formacie SVG to niesamowite podejście, ponieważ nie tracą one na jakości po zmianie ich rozmiaru.
Zmień rozmiar obrazów: możesz mieć różne rozmiary i formaty obrazów. Zawsze upewnij się, że obrazy w sliderze mają ten sam rozmiar. Możesz to osiągnąć za pomocą CSS.

Podsumowanie

Mamy nadzieję, że możesz teraz stworzyć w pełni funkcjonalny suwak obrazu, aby wyświetlać ważne dane w swojej witrynie bez korzystania z ram interfejsu użytkownika. Możesz użyć tego samego podejścia do tworzenia suwaków wideo na stronach internetowych.