Как создать карусель изображений на сайте

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

Станьте веб-разработчиком с нуля за 15 месяцев на курсе онлайн-университета Skypro. Преподаватели — практикующие эксперты из VK, «Альфа-Банка», Skyeng и других крупных компаний. В программе нет лишней теории, зато много практических заданий, а результаты курсовых можно положить в портфолио. Специалисты центра карьеры помогут с резюме, сопроводительными письмами и собеседованиями.

Шаг 1: HTML-структура

Для начала создадим базовую структуру карусели с помощью HTML:

<div class="carousel">
  <div class="carousel-inner">
    <div class="carousel-item">
      <img src="image1.jpg" alt="Image 1">
    </div>
    <div class="carousel-item">
      <img src="image2.jpg" alt="Image 2">
    </div>
    <div class="carousel-item">
      <img src="image3.jpg" alt="Image 3">
    </div>
  </div>
</div>

Здесь мы создали контейнер с классом carousel, который содержит вложенный блок carousel-inner. Внутри этого блока находятся отдельные элементы карусели с классом carousel-item, каждый из которых содержит изображение.

Шаг 2: CSS-стили

Теперь применим базовые стили для нашей карусели с помощью CSS:

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

.carousel-inner {
  display: flex;
  width: 300%;
  transition: transform 0.5s;
}

.carousel-item {
  flex: 1;
  text-align: center;
}

.carousel-item img {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
}

Здесь мы задаем стили для контейнера карусели, делаем его узким и скрываем лишний контент. Для блока carousel-inner мы используем свойство display: flex;, чтобы выровнять элементы карусели в одну строку. Также добавляем плавную анимацию с помощью свойства transition.

Курсы по программированию

Помогаем получить новую профессию с гарантией трудоустройства!

Подробнее

Шаг 3: JavaScript-функционал

Наконец, добавим функционал прокрутки карусели с помощью JavaScript:

let currentIndex = 0;
const carouselItems = document.querySelectorAll('.carousel-item');

function goToSlide(index) {
  if (index < 0) {
    index = carouselItems.length - 1;
  } else if (index >= carouselItems.length) {
    index = 0;
  }
  currentIndex = index;
  document.querySelector('.carousel-inner').style.transform = `translateX(-${currentIndex * 100}%)`;
}

function goToNextSlide() {
  goToSlide(currentIndex + 1);
}

function goToPrevSlide() {
  goToSlide(currentIndex - 1);
}

setInterval(goToNextSlide, 3000); // автоматическая прокрутка каждые 3 секунды

На курсе Skypro «Веб-разработчик» научитесь писать код и тестировать его под руководством опытных наставников. Освоите все необходимые знания и навыки, чтобы стартовать в профессии уверенным младшим специалистом. Программу реально освоить, даже если вы никогда раньше не программировали и ничего не знаете об IT, а материалы курса и регулярные обновления будут доступны навсегда.

Здесь мы используем небольшой скрипт для управления прокруткой карусели. Функция goToSlide прокручивает карусель до указанного индекса, а функции goToNextSlide и goToPrevSlide перемещают карусель вперед и назад соответственно. Также добавлена автоматическая прокрутка каждые 3 секунды с помощью функции setInterval.

🎉 Теперь у вас есть работающая карусель изображений на вашем сайте! Вы можете продолжить настройку и стилизацию согласно своим предпочтениям.

Если вы хотите углубить свои знания в веб-разработке, рекомендую посетить .

Тест на профориентацию

За 10 минут узнайте, как ваш опыт пригодиться в IT индустрии

Подробнее