Play IT

CSS-карусель баннеров

Интерактивное демо «CSS-карусель баннеров» — раздел Энциклопедия · Данные и разметка.

data-markupencyclopedia

Промо-карусель

Смена слайдов, точки навигации и автопрокрутка — разберите поведение на живом примере

  • Контейнер с max-width и margin: 0 auto ограничивает ширину баннера и центрирует его на странице.
  • Слайды лежат в одной области (position: absolute). Виден только слайд с классом is-active — у него opacity: 1.
  • Декоративные фигуры анимируются через @keyframes отдельно от смены слайдов — так проще поддерживать код.
  • setInterval вызывает next() каждые N мс. После клика пользователя таймер сбрасывают, чтобы не было "двойного" переключения.

Слайд 1 из 3 · автопрокрутка каждые 5 с

.banner-container {
  max-width: 560px;
  margin: 0 auto;
}