Как сделать карусель в html css js

Чтобы создать карусель в HTML, CSS и JavaScript, необходимо выполнить следующие шаги:

1. Разметить HTML-код

Создайте структуру, которая позволит отображать изображения в карусели. Обычно карусель состоит из контейнера, содержащего блоки с изображениями. Добавьте кнопки для перехода на предыдущий и следующий слайд.

<div class="carousel">
  <div class="carousel-slides">
    <img src="slide1.jpg" alt="">
    <img src="slide2.jpg" alt="">
    <img src="slide3.jpg" alt="">
  </div>
  <button class="prev-slide"></button>
  <button class="next-slide"></button>
</div>

2. Оформить стили CSS

Добавьте стили для контейнера карусели и ее элементов. Установите ширину и высоту элементов для подгонки карусели под свои элементы.

.carousel {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.carousel-slides {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  transition: transform 0.3s ease-out;
}

.carousel-slides img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.prev-slide, .next-slide {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 0;
}

.prev-slide::before, .next-slide::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(arrow.svg) no-repeat center/70%;
}

.prev-slide {
  left: 20px;
}

.next-slide {
  right: 20px;
  transform: translateY(-50%) rotate(180deg);
}

3. Добавить функциональность JavaScript

Добавьте обработчики событий на кнопки предыдущего и следующего слайда, чтобы переключаться между слайдами. Существует много способов создания функционала переключателя между слайдами — вот один из них:

const carouselSlides = document.querySelector(".carousel-slides");
const prevSlide = document.querySelector(".prev-slide");
const nextSlide = document.querySelector(".next-slide");
const slideWidth = carouselSlides.clientWidth;

let currentSlide = 0;

prevSlide.addEventListener("click", () => {
  currentSlide--;
  if (currentSlide < 0) {
    currentSlide = carouselSlides.children.length - 1;
  }
  carouselSlides.style.transform = `translateX(-${slideWidth * currentSlide}px)`;
});

nextSlide.addEventListener("click", () => {
  currentSlide++;
  if (currentSlide >= carouselSlides.children.length) {
    currentSlide = 0;
  }
  carouselSlides.style.transform = `translateX(-${slideWidth * currentSlide}px)`;
});

Здесь мы используем переменные для карусели, предыдущего и следующего слайдов, ширины слайда и текущего слайда. Мы добавляем обработчики событий на кнопки предыдущего и следующего слайда, в которых увеличиваем или уменьшаем номер текущего слайда, переключаясь между слайдами в зависимости от направления переключения. Мы применяем стиль для перемещения слайда с помощью свойства «transform: translateX()».

Все вместе в данном примере кода позволяет создать базовую карусель в HTML, CSS и JavaScript. Более сложные карусели с дополнительными функции варьируются в зависимости от потребностей сайта.