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

Зміст

Чи траплялося вам коли-небудь опинитися в ситуації, коли потрібно показати декілька зображень або відео на веб-сторінці, але не бажаєте займати багато місця? Можливо, ви прагнете додати інтерактивності або зробити свої веб-сайти більш привабливими?

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

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

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

Ось кілька причин, чому вам варто використовувати слайдери на своїх веб-сторінках:

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

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

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

Налаштування папки проекту

Нам потрібна папка проекту, папка для зображень всередині неї та файли HTML, CSS і JavaScript. Я назву свій проект “Image-Slider”. Ви можете створити його вручну або скористатися цими командами:

mkdir Image-Slider

cd Image-Slider

mkdir Images && touch index.html styles.css script.js

Додайте всі ваші зображення до папки “Images”, яку ми створили в папці проекту, і переходимо до наступного кроку.

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

Типи слайдерів зображень

Існують два основні типи слайдерів зображень: автоматичний слайдер і автоматичний слайдер з кнопками.

#1. Автоматичний слайдер зображень

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

HTML код

Ось мій HTML-код:

<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Слайдер Зображень</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div id="slider">
    <div class="slide">
        <h2>Африка</h2>
      <img src="Images/img1.jpg" >
    </div>
    <div class="slide">
        <h2>Америка</h2>
      <img src="Images/img2.jpg" >
    </div>
    <div class="slide">
        <h2>Азія</h2>
      <img src="Images/img3.jpg" >
    </div>
    <div class="slide">
        <h2>Арабський Світ</h2>
      <img src="Images/img4.jpg" >
    </div>
    <div class="slide">
        <h2>Сучасність</h2>
      <img src="Images/img5.jpg" >
    </div>
    <div class="slide">
        <h2>Європа</h2>
      <img src="Images/img6.jpg" >
    </div>
  </div>

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

</body>
</html>

З цього коду видно наступне:

Я підключив свій CSS-файл до index.html у розділі <head>. Він знадобиться на наступних етапах.
Я додав JavaScript до свого HTML-коду перед закриваючим тегом <body>. JavaScript буде додавати функціональність до слайдера.
Кожен слайд має клас “slide”.
Я використовую тег <img> для вставки зображень з папки “Images”.

Стилізація автоматичного слайдера за допомогою 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 для вибору всіх елементів із класом “slide”.
Встановлює початкове значення поточного слайда на 0.
Встановлює slideInterval на 2000 (2 секунди), тобто зображення в слайдері змінюються кожні 2 секунди.
Код slides[currentSlide].className = ‘slide’; видаляє активний клас з поточного слайда.
Код currentSlide = (currentSlide + 1) % slides.length; збільшує індекс поточного слайда.
Код slides[currentSlide].className = ‘slide active’; додає активний клас до поточного слайда.

Ось як працює автоматичний слайдер:

#2. Автоматичний слайдер з кнопками

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

HTML код

Ви можете змінити свій файл index.html на наступний:

<html lang="uk">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Слайдер Зображень</title>
    <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>

Цей 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 працює так:

Ми встановили display класу .mySlides як none, тобто всі слайди приховані за замовчуванням.
Ми встановили opacity мініатюр при наведенні курсора на 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 зі значенням display, встановленим як 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.

Підсумок

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