Создание карусели с помощью HTML, CSS и JavaScript

Карусель — это популярный способ отображения серии изображений или контента на веб-сайте. В этой статье мы рассмотрим, как создать карусель с помощью HTML, CSS и JavaScript.

Для начала мы создадим структуру HTML для карусели. Мы будем использовать элемент div для обертывания карусели и серию элементов img для хранения изображений:

<div class="carousel">
  <img src="image1.jpg" alt="image 1">
  <img src="image2.jpg" alt="image 2">
  <img src="image3.jpg" alt="image 3">
</div>

Далее мы стилизуем карусель с помощью CSS. Мы зададим элементу .carousel относительное положение и зададим ему ширину и высоту:

.carousel {
  position: relative;
  width: 500px;
  height: 300px;
}

Мы также стилизуем элементы img так, чтобы они имели абсолютную позицию и занимали всю ширину и высоту карусели:

.carousel img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Теперь, когда у нас есть базовый стиль, давайте добавим кнопки навигации для карусели. Мы создадим два элемента button внутри элемента .carousel и дадим им классы prev и next:

<div class="carousel">
  <button class="prev">Prev</button>
  <img src="image1.jpg" alt="image 1">
  <img src="image2.jpg" alt="image 2">
  <img src="image3.jpg" alt="image 3">
  <button class="next">Next</button>
</div>

Мы также стилизуем кнопки навигации с помощью CSS:

.carousel button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: transparent;
  border: none;
  color: white;
  font-size: 32px;
  cursor: pointer;
}

.carousel .prev {
  left: 20px;
}
.carousel .next {
  right: 20px;
}

Наконец, мы будем использовать JavaScript для реализации функции карусели. Мы сохраним ссылку на элемент карусели и изображения в переменных:

const carousel = document.querySelector('.carousel');
const images = carousel.querySelectorAll('img');

Мы также создадим переменную для хранения текущего индекса отображаемого изображения:

let currentIndex = 0;

Затем мы добавим прослушиватели событий к кнопкам навигации для обработки предыдущих и следующих действий:

carousel.querySelector('.prev').addEventListener('click', () => {
  currentIndex--;
  if (currentIndex < 0) {
    currentIndex = images.length - 1; 
  } 
  updateCarousel(); 
});

carousel.querySelector('.next').addEventListener('click', () => { 
currentIndex++; 
if (currentIndex > images.length - 1) {
 currentIndex = 0; 
} 
  updateCarousel(); 
});

Мы также создадим функцию для обновления карусели на основе текущего индекса:

function updateCarousel() {
  images.forEach((image, index) => {
    if (index === currentIndex) {
      image.style.display = 'block';
    } else {
      image.style.display = 'none';
    }
  });
}

Благодаря этим изменениям наша карусель теперь работает и позволяет пользователям перемещаться по изображениям с помощью кнопок «Предыдущая» и «Далее».