Як створити слайдер зображень за допомогою JavaScript, щоб покращити ваш сайт

Ви коли-небудь потрапляли в ситуацію, коли ви хочете відобразити кілька зображень/відео на розділі веб-сторінки, але не хочете займати багато місця? Ви хочете додати інтерактивності своїм веб-сторінкам або зробити їх більш привабливими?

Повзунок зображення може позбавити вас від боротьби. У цій статті ми визначимо повзунок зображення, передумови для створення повзунка зображення та як його створити за допомогою HTML, JavaScript і CSS.

Зміст

Що таке слайдер зображення?

Слайдери – це каруселі або слайд-шоу, які відображають тексти, зображення чи відео. У цій статті мова піде про повзунки зображень. Більшість веб-розробників використовують повзунки на домашній сторінці, щоб продемонструвати пропозиції чи найважливішу інформацію.

Це деякі причини, чому варто використовувати повзунки на своїх веб-сторінках.

Покращення взаємодії з користувачем: ідеальна веб-сторінка має бути компактною, щоб кінцевим користувачам не доводилося прокручувати та прокручувати, щоб отримати важливі дані. Якщо у вас є кілька зображень, ви можете позбавити користувачів від клопоту прокручування, відображаючи їх у слайдері.
Візуальна привабливість: більшість користувачів веб-сайту не витрачатимуть багато часу на звичайну веб-сторінку. Ви можете покращити візуальну привабливість за допомогою повзунків і анімації.
Економія місця: якщо у вас є приблизно 20 зображень, які ви хочете відобразити на своїй веб-сторінці, вони можуть зайняти багато місця. Створення повзунка дозволить вам заощадити простір і надати користувачам доступ до всіх них.
Відображення динамічного вмісту. Ви можете використовувати повзунки для відображення динамічного вмісту, наприклад вставок соціальних мереж, блогів і новин.

Передумови для створення слайдера зображення

Базове розуміння HTML: тут ми опишемо структуру повзунка. Вам має бути зручно працювати з різними HTML-тегами, класами та div.
Базове розуміння CSS: ми будемо використовувати CSS для стилізації наших повзунків зображень і кнопок.
Базове розуміння JavaScript: ми будемо використовувати JavaScript, щоб зробити повзунки зображень адаптивними.
Редактор коду: ви можете використовувати будь-який редактор коду. Я буду використовувати Visual Studio Code.
Колекція зображень.

Налаштуйте папку проекту

Нам потрібна папка проекту, папка зображень у ній і файли HTML, CSS і JavaScript. Свій проект я назву «Image-Slider». Ви можете створити свій проект вручну або скористатися цими командами, щоб почати;

Повзунок зображення mkdir

cd Image-Slider

mkdir Зображення && торкніться index.html styles.css script.js

Додайте всі свої зображення до папки «Зображення», яку ми створили в папці проекту, і переходьте до наступного кроку.

Це папка мого проекту, куди я додав шість зображень, які я буду використовувати для створення слайдера. Весь наш HTML-код буде у файлі index.html.

USB 4 забезпечить швидкість Thunderbolt за менші гроші

Типи повзунків зображень

Ми можемо мати два типи повзунків зображень; автоматичний слайдер і автоматичний слайдер зображення з кнопками.

#1. Автоматичний повзунок зображення

Автоматичний повзунок автоматично прокручується до наступного зображення через певний час, наприклад, 3 секунди.

HTML код

Це мій код 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>

З цього коду ми можемо відзначити наступне;

Я імпортував свій файл CSS до index.html у розділі . Це буде використано на наступних етапах.

Я додав JavaScript до свого HTML-коду безпосередньо перед закриваючим тегом . Я буду використовувати JavaScript, щоб додати функціональність до повзунків.
Кожен слайд має клас слайдів.
Я використав тег для імпорту зображень із папки «Зображення».

Стилізуйте автоматичний повзунок зображення за допомогою CSS

Тепер ми можемо стилізувати наші зображення, оскільки ми вже пов’язали файли CSS і HTML.

Додайте цей код до свого файлу CSS;

#slider {
    width: 80%;
  }
  
  .slide {
    width: 80%;
    display: none;
    position: relative;
  }
  
  .slide img {
    width: 80%;
    height: 80%;
  }
  
  .slide.active {
    display: block;
  }

З цього коду ми можемо відзначити наступне;

Ми маємо ширину і висоту нашого слайдера на 80%
Ми встановили блокування активного слайда, тобто відображатиметься лише активний слайд, а решта приховані.

Як додати JavaScript, щоб зробити слайдер зображення адаптивним

Додайте цей код до свого файлу 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";
}

Цей JavaScript робить наступне;

Ми використовуємо селектор document.querySelectorAll для націлювання на всі елементи класу слайдів.
Ми надаємо поточному слайду 0 початкове значення.
Ми встановили slideInterval як 2000 (2 секунди), тобто зображення на повзунку змінюються кожні 2 секунди.
Цей код слайдів[currentSlide].className = ‘слайд’; видаляє активний клас із поточного слайда
Цей код currentSlide = (currentSlide + 1) % slides.length; збільшує поточний індекс слайда.
Цей код слайдів[currentSlide].className = ‘активний слайд’; додає активний клас до поточного слайда.

Автоматичний повзунок працює наступним чином;

#2. Автоматичний повзунок із кнопками

Створений нами повзунок зображення автоматично прокручується кожні 2 секунди. Тепер ми можемо створити зображення, на якому користувачі можуть переходити до наступного слайда, натискаючи кнопку, або автоматично прокручувати його кожні 3 секунди, якщо користувач не натискає кнопки.

HTML код

Ви можете змінити вміст вашого файлу index.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>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>

Цей HTML-код працює наступним чином;

У нас є клас під назвою mySlides, який містить наші п’ять зображень.
У нас є дві кнопки, «попередня» та «далі» з onClick, що дозволяє користувачам прокручувати слайди.
У нас є мініатюра, яка показує зображення в нижній частині веб-сторінки.

код 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;
}

Код CSS працює наступним чином;

Ми встановили властивість відображення класу .mySlides як none, тобто всі слайди приховано за замовчуванням.
Ми встановили непрозорість мініатюр, на які наводиться курсор, як 1 за допомогою активного правила .demo:hover {opacity: 1;}.

код 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;
}

Ви можете отримати остаточний вихідний код тут.

Наш код JavaScript робить наступне;

У нас є функція currentSlide зі значенням відображення, встановленим як none. Це правило дозволяє нашій веб-сторінці відображати лише поточний слайд.
У нас є функція plusSlides, яка додає/віднімає вказане значення від slideIndex, щоб визначити, який слайд відображати.
Якщо користувач не натискає кнопки, слайди автоматично прокручуватимуться кожні 3000 мілісекунд.

Якщо користувач використовує вкладку навігації, наш повзунок зображення працюватиме наступним чином;

Якщо користувач не використовує навігаційні кнопки, повзунок зображення автоматично прокручуватиметься кожні 3 секунди, як зазначено нижче;

Тестування та налагодження повзунка зображення

Помилки та помилки є частиною шляху розробника, і наявність їх у вашому коді не означає, що ви поганий розробник. Якщо ваш код не працює навіть після виконання згаданих вище кроків, ви можете спробувати ці параметри тестування та налагодження, щоб виправити помилки:

Налагоджуйте кожен файл окремо: наш код містить три файли: HTML, CSS і JavaScript. Три мови мають різні правила. Ви можете перевірити, чи дійсні ваші коди HTML, CSS і JavaScript, за допомогою таких інструментів, як W3C Markup Validation Service для HTML, CSS Validator для вашого CSS-коду та Chrome DevTools для перевірки коду JavaScript.
Виконайте різні типи тестів: ви можете виконати візуальні тести, щоб переконатися, що зображення відображаються правильно, тести продуктивності, щоб перевірити, чи зображення реагують, і функціональні тести, щоб переконатися, що зображення придатні для навігації.
Перевірте свій код із різними форматами та розмірами зображень: хороший повзунок має працювати з різними форматами та розмірами зображень.
Автоматизуйте свої тести: автоматизація є скрізь, і ви також можете скористатися нею під час тестування. Ви можете використовувати такі інструменти, як Selenium або LoadRunner, щоб писати та виконувати сценарії автоматизації тестування. Ці інструменти також дозволяють повторно використовувати деякі з ваших тестів.
Документуйте свої тести: тестування – це безперервний процес. Можливо, вам доведеться продовжувати вдосконалювати свої тести, доки ваш код не запрацює належним чином. Задокументуйте цей процес, щоб зробити ваш код читабельним і легким для посилання.

Повзунки зображень: практичні поради

Будьте простими: повзунки привабливі. Проте зберігайте низьку кількість зображень у повзунку. Ідеальним є 4-7 зображень на слайді.
Перевірте свої повзунки: перевірте їх на функціональність, перш ніж публікувати в Інтернеті.
Створення адаптивних повзунків: переконайтеся, що створені вами повзунки реагують на різні розміри екрана.
Використовуйте високоякісні зображення: знімайте/завантажуйте високоякісні зображення для слайдерів. Збереження зображень у форматі SVG є чудовим підходом, оскільки вони не втрачають своєї якості, коли ви змінюєте їх розмір.
Змініть розмір своїх зображень: у вас можуть бути різні розміри та формати зображень. Завжди переконайтеся, що зображення в слайдері мають однаковий розмір. Ви можете досягти цього за допомогою CSS.

Підведенню

Ми сподіваємося, що тепер ви можете створити повнофункціональний слайдер зображення для відображення важливих даних на вашому веб-сайті без використання інтерфейсу користувача. Ви можете використовувати той самий підхід для створення слайдерів відео на веб-сторінках.

Як додавати, налаштовувати та використовувати віджети на Mac