logo
Все курсыВсе курсы
ВебинарыРазобраться в ITРеферальная программаПолучить профессию в SkyproПолучить профессию в Skypro

Создание карусели изображений на CSS и HTML без JavaScript

Пройдите тест, узнайте какой профессии подходите

Я предпочитаю
0%
Работать самостоятельно и не зависеть от других
Работать в команде и рассчитывать на помощь коллег
Организовывать и контролировать процесс работы

Быстрый ответ

Для создания карусели изображений с помощью CSS можно применить свойство position: absolute; в сочетании с псевдоклассом :target. Для навигации по карусели используйте якорные ссылки с уникальными id. Анимацию при смене изображений осуществите с помощью @keyframes.

CSS
Скопировать код
/* Карусель изображений изначально скрыта, но готова к отображению */
.carousel img { display: none; position: absolute; }
/* Изображение становится видимым, когда его id является целью */
#img1:target, #img2:target, #img3:target { display: block; }
/* Анимация смены изображений с регулярными интервалами */
@keyframes cycle { 0%,100% { location.hash='#img1'; } 33% { location.hash='#img2'; } 66% { location.hash='#img3'; }}
.carousel { animation: cycle 15s infinite; }

Разместите кнопки управления для навигации пользователем:

HTML
Скопировать код
<div class="carousel">
  <a href="#img1" id="img1">Далее</a> <img src="image1.jpg"/>
  <a href="#img2" id="img2">Далее</a> <img src="image2.jpg"/>
  <a href="#img3" id="img3">Далее</a> <img src="image3.jpg"/>
</div>
Кинга Идем в IT: пошаговый план для смены профессии

Кастомные иконки prev и next

Создайте иконки для кнопок "назад" и "вперед", оформив их в стиле классических символов управления мультимедиа. Разместите их в карусели так, чтобы они визуально не мешали использованию.

CSS
Скопировать код
/* Сделайте элементы управления привлекательными и функциональными */
.carousel a {
  text-decoration: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.carousel a#img1 { left: 0; }
.carousel a#img2, .carousel a#img3 { right: 0; }

Динамика в карусели

Чтобы работать с большим количеством изображений, используйте шаблонизатор, например, Jade или Handlebars. Цикл for-loop позволит генерировать HTML на основе массива данных об изображениях.

jade
Скопировать код
each imgSrc, index in images
  input(type="radio" id=`img${index}` name="carousel" checked=index===0)
  label(for=`img${index}`) Далее
  .carousel__slide(style=`background-image: url(${imgSrc});`)

Адаптивность к разным экранам

Для корректного отображения карусели на устройствах разных размеров, сделайте макет гибким. Применяйте динамическое позиционирование и используйте процентные ширины или единицы размера viewport для адаптивного дизайна.

CSS
Скопировать код
/* Адаптируем элементы для правильного отображения на устройствах с малыми экранами */
@media (max-width: 768px) {
  .carousel a {
    padding: 10px;
    font-size: larger; /* Элементы управления увеличены для удобства на сенсорных экранах */
  }
}

Визуализация

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

Markdown
Скопировать код
Просмотр 1 (🌅): Всегда в поле зрения
Просмотр 2 (🌃): Выезжает следующим
Просмотр 3 (🏞️): Выезжает последним

Реализация этого вращения изображений с помощью CSS предстаёт как смена сцен в магическом театре.

CSS
Скопировать код
@keyframes rotate-carousel {
  0% { transform: rotateY(0deg); }
  33% { transform: rotateY(-120deg); }
  66% { transform: rotateY(-240deg); }
  100% { transform: rotateY(-360deg); }
}

Всё примерно так:

Markdown
Скопировать код
🌅 Затем, 🌃 Затем, 🏞️
# CSS, по сути, просто вращает содержимое, меняя кадры по очереди

Благодаря такому подходу, кадры меняются бесконечно, и всё это управляется с помощью одного CSS!

Дополнительно: переходы между слайдами

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

CSS
Скопировать код
/* Движение должно быть плавным, словно на волшебном ковре */
.carousel img {
  transition: opacity 1s ease-in-out;
}

Обеспечиваем доступность

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

CSS
Скопировать код
/* Доступная навигация поможет пользователю не заблудиться в виртуальном пространстве */
.carousel input[type="radio"]:focus + label {
  outline: 2px solid blue; /* Яркий индикатор для навигации с клавиатуры */
}

Автоматическое перелистывание слайдов

Реализуйте автовоспроизведение карусели с помощью CSS-анимаций @keyframes, настроенных на циклическое переключение слайдов через псевдокласс :target, чтобы создать эффект непрерывного показа изображений.

CSS
Скопировать код
/* Система автоматически перелистывает изображения, позволяя пользователю просто наблюдать */
@keyframes autoplay-carousel {
  0% { location.hash='#img1'; }
  25% { location.hash='#img2'; }
  50% { location.hash='#img3'; }
  /* И так до бесконечности */
}
.carousel {
  animation: autoplay-carousel 20s infinite;
}

Полезные материалы

  1. CSS-Only Carousel | CSS-Tricks — Отличное руководство для тех, кто хочет углубиться в тему создания CSS-каруселей.
  2. Как создать слайдшоу | W3Schools — Пособие для начинающих по созданию CSS-слайдшоу.
  3. Использование CSS-переходов | MDN — Оживите свою карусель плавными переходами.
  4. Веб-дизайн | WDD — Узнайте секреты создания адаптивных каруселей на чистом CSS.
Свежие материалы
Как настроить HTTPS на вашем сайте
6 сентября 2024
Как установить и настроить Swift на Linux
6 сентября 2024
Коды состояния HTTP: что они значат?
6 сентября 2024