Как создать карусель с помощью HTML, CSS и JavaScript: пошаговое руководство.

Карусель — это широко используемый элемент пользовательского интерфейса для организованного и интерактивного отображения контента. Эти карусели позволяют пользователям плавно и увлекательно перемещаться между различными элементами контента, будь то изображения, текст или карточки.

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

Мы рассмотрим необходимые шаги для создания структуры HTML, стилизации с помощью CSS, добавления анимации и управления с помощью JavaScript в понятной и дидактической форме. Обладая этими знаниями, вы сможете создавать свои собственные карусели, адаптируя их к различным проектам и потребностям.

Для этого необходимы базовые знания HTML, CSS и JavaScript. Кроме того, нам понадобится редактор кода на ваш выбор, например Visual Studio Code или Sublime Text.

Давайте начнем!

Подготовка окружающей среды!

Прежде чем мы начнем создавать карусель, нам нужно подготовить среду разработки.

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

<div class="carousel">
  <div class="card-container">
    <div class="card">Card 1</div>
    <div class="card">Card 2</div>
    <div class="card">Card 3</div>
    <div class="card">Card 4</div>
    <div class="card">Card 5</div>
  </div>
</div>

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

Оформление карусели!

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

Мы можем начать с определения размера элемента div «carousel», охватывающего всю карусель.

.carousel {
  width: 100%; /* Width of carousel */
  height: 166px; /* Height of carousel */
}

Далее давайте стилизуем div, который будет содержать карточки. Мы можем использовать свойство «flex», чтобы расположить их рядом в div «card-container»:

.card-container {
  width: 100%; /* Width of card container */
  display: flex; /* Set inline elements */
}

.card {
  min-width: 250px; /* Set min width of card */
  height: 150px; /* Set height of card */
}

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

.card-container {
  /* ... */
  overflow-x: auto; /* Set overflow in horizontal scroll */
  overflow-y: hidden; /* Hidden overflow in vertical scroll */
  scroll-snap-type: x mandatory; /* Force the scroll to snap to the start of a scroll-snap area */
  gap: 8px; /* Set gap between cards */
}

.card {
  /* ... */
  scroll-snap-align: start; /* Set the element focus position in scroll container */
}

Чтобы создать поведение карусели, наш «карточный контейнер» использует свойство scroll-snap-type, которое определяет, как элемент прокручивается и останавливается в определенных точках по пути. Например, если у вас есть контейнер с прокруткой, вы можете использовать это свойство, чтобы убедиться, что он останавливается именно там, где вы хотите. Это как «клей», который удерживает вещи на месте, когда вы прокручиваете влево или вправо.

И наш элемент «card» использует свойство scroll-snap-align, которое определяет, где элемент должен «привязываться» к контейнеру прокрутки. Он контролирует, где элемент остановится при прокрутке контейнера. Вы можете выбрать, где элемент будет привязываться в контейнере, как по вертикали, так и по горизонтали. Если вы не укажете значение для одной оси, она примет то же значение, что и другая. Например, если вы установите scroll-snap-align: center, он будет центрировать элемент по вертикали и горизонтали в контейнере, когда вы остановите прокрутку.

Сделаем красивее!

На этом этапе в игру вступает уникальность каждого проекта, так как пришло время воплотить в жизнь стиль карусели. Вот пример:

.card-container {
  /* ... */
  width: calc(100% - 16px);
  margin: 8px;
  flex: 0 0 calc(100% - 16px); /* Set width of card container */
}

.card-container::-webkit-scrollbar {
  display: none; /* Hide scrollbar in Chrome, Safari and Opera */
}

.card {
  /* ... */
  display: flex;
  justify-content: center;
  align-items: center;
  background:#17BF60;
  border: 1px solid #4F5873;
  color: #4a544c;
  border-radius: 8px;
}

.card:hover {
  background: #1ED96F; /* Set background color when hover */
}

Добавление щелчка для фокусировки

Теперь пришло время добавить наш любимый JavaScript. Мы добавим прослушиватель событий для щелчка, чтобы установить позицию прокрутки на сфокусированную карту.

const listOfCardElements = document.querySelectorAll('.card');
const cardContainer = document.querySelector('.card-container');

listOfCardElements.forEach((cardElement, index) => {
  cardElement.addEventListener('click', () => {
    const scrollLeft = index * listOfCardElements[0].offsetWidth;
    cardContainer.scrollTo({ left: scrollLeft, behavior: 'smooth' });
  });
});

Мы добавили событие щелчка в набор элементов с CSS-классом «карточка» и прокручиваем горизонтальный контейнер до соответствующего элемента карточки при клике.

const scrollLeft = index * listOfCardElements[0].offsetWidth;Рассчитывает количество пикселей, которое необходимо прокрутить контейнеру, чтобы отобразить соответствующий элемент карточки. Горизонтальное смещение вычисляется путем умножения индекса элемента на его ширину. Свойство offsetWidth возвращает общую ширину элемента, включая его поля и отступы.

cardContainer.scrollTo({ left: scrollLeft, behavior: 'smooth' });Используйте метод scrollTo элемента cardContainer для горизонтальной прокрутки контейнера до положения, указанного scrollLeft. Для свойства behavior установлено значение «smooth» для плавной прокрутки.

В заключение

Создание карусели с помощью HTML, CSS и JavaScript может быть ценным навыком для фронтенд-разработчиков, которые хотят создавать привлекательные и отзывчивые интерфейсы. В этой статье представлено пошаговое руководство по созданию карусели карточек, описывающее необходимые шаги для создания структуры HTML, стилизации с помощью CSS, добавления анимации и управления с помощью JavaScript в ясной и дидактической форме. Следуя этим шагам, можно создавать собственные карусели, адаптируя их к различным проектам и потребностям. Кроме того, в статье обсуждались приемы адаптивного дизайна и демонстрировалось, как использовать такие свойства, как «scroll-snap-type» и «scroll-snap-align», чтобы сделать карусель более привлекательной. Наконец, в статье было показано, как добавить прослушиватель событий щелчка, чтобы установить позицию прокрутки для сфокусированной карты.

Проект на GitHub:
https://github.com/Pietrogon/carousel-example

Мой LinkedIn
https://www.linkedin.com/in/pietrogon

Ссылка

Свойство flex: веб-сайт Mozilla Developer Network (MDN) — отличный источник информации о свойствах CSS, включая flex. Вы можете найти больше информации здесь: https://developer.mozilla.org/en-US/docs/Web/CSS/flex
Медиа-запросы: на веб-сайте MDN также есть исчерпывающее руководство по использованию медиа-запросов в CSS. Вы можете найти больше информации здесь: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries
Свойство scroll-snap-type: документация MDN также является хорошим источником для изучения этого свойства CSS. Вы можете найти больше информации здесь: https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type
Свойство scroll-snap-align: на веб-сайте W3C есть подробная спецификация этого свойства CSS. Вы можете найти больше информации здесь: https://www.w3.org/TR/css-scroll-snap-1/#scroll-snap-align-property

Как создать карусель с помощью HTML, CSS и JavaScript: пошаговое руководство.