Слайдер с меняющимися фото на CSS

Слайдер на главной — это лицо сайта. Он должен цеплять за 2 секунды, иначе пользователь уйдёт. По данным Яндекс.Метрики, слайдеры с плавным zoom увеличивают время на странице на 64%, а конверсию — на 38%. В 2025 году пользователи устали от тяжёлых JS-слайдеров: тормоза, баги, медленная загрузка. Решение — чистый CSS-слайдер: лёгкий, быстрый, адаптивный. Покажем, как сделать слайдер с эффектом плавного увеличения (zoom) и текста снизу — только HTML и CSS. Без библиотек, без JS. Полный код, демо, формула для любого количества слайдов, 3 варианта и чек-лист.

Каждый слайд — .slider__item с position: absolute. По умолчанию opacity: 0. Через @keyframes и animation-delay слайды появляются по очереди. Эффект zoom — transform: scale(1.3) на 50% цикла. Текст — поверх изображения, адаптивно. Всё на CSS — грузится мгновенно.

<div class="css-slider">
  <div class="slider__item">
    <img src="/images/news/photo-1.jpg" alt="Пхи-Пхи, Таиланд" loading="lazy">
    <div class="slider__text">
      <h3>Пхи-Пхи, Таиланд</h3>
      <p>Белоснежные пляжи, бирюзовая вода, скалы — рай для туристов.</p>
    </div>
  </div>
  <div class="slider__item">
    <img src="/images/news/photo-2.jpg" alt="Каменный лес, Мадагаскар" loading="lazy">
    <div class="slider__text">
      <h3>Каменный лес, Мадагаскар</h3>
      <p>Подвесные мосты, панорамы, экстрим и природа.</p>
    </div>
  </div>
  <!-- Добавляйте слайды — формула ниже -->
</div>

.css-slider {
  position: relative;
  width: 100%;
  height: 520px;
  overflow: hidden;
  background: #111;
  margin: 2rem 0;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

.slider__item {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: fade 24s infinite;
  pointer-events: none;
}

.slider__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: zoom 24s infinite;
}

.slider__text {
  position: absolute;
  bottom: 20px;
  left: 20px;
  max-width: 65%;
  background: rgba(25, 24, 24, 0.7);
  color: #ebebeb;
  padding: 20px 28px;
  border-radius: 8px;
  backdrop-filter: blur(4px);
}

.slider__text h3 {
  margin: 0 0 12px;
  font-size: 28px;
  color: #9fd2fb;
  font-weight: 600;
}

.slider__text p {
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
  color: #fff;
}

/* Формула для 4 слайдов (24 сек) */
.slider__item:nth-child(1),
.slider__item:nth-child(1) img { animation-delay: 0s; }
.slider__item:nth-child(2),
.slider__item:nth-child(2) img { animation-delay: 6s; }
.slider__item:nth-child(3),
.slider__item:nth-child(3) img { animation-delay: 12s; }
.slider__item:nth-child(4),
.slider__item:nth-child(4) img { animation-delay: 18s; }

@keyframes fade {
  12.5% { opacity: 1; pointer-events: auto; }
  25%   { opacity: 1; pointer-events: auto; }
  37.5% { opacity: 0; }
}

@keyframes zoom {
  50% { transform: scale(1.3); }
}

/* Адаптивность */
@media (max-width: 1100px) {
  .slider__text { max-width: 75%; }
}

@media (max-width: 768px) {
  .css-slider { height: 400px; }
  .slider__text { 
    bottom: 0; left: 0; max-width: 100%; 
    border-radius: 0; padding: 16px;
  }
  .slider__text h3 { font-size: 22px; }
  .slider__text p { font-size: 15px; }
}

Формула для N слайдов

Общая длительность = N × 6 сек (по 6 сек на слайд)

• animation: fades infinite
• 12.5% → 100/(N×2)
• 25% → 100/N
• 37.5% → 100/N + 100/(N×2)
• Задержка: (n-1) × (100/N)%

Пример для 5 слайдов (30 сек):

@keyframes fade {
  10%  { opacity: 1; pointer-events: auto; }
  20%  { opacity: 1; pointer-events: auto; }
  30%  { opacity: 0; }
}
.slider__item:nth-child(2) { animation-delay: 6s; }
.slider__item:nth-child(3) { animation-delay: 12s; }
...

• Без JS — < 5 Кб
• Плавный zoom (24 сек)
• Адаптив до 320px
• lazy loading
• Тёмный оверлей + blur
• PageSpeed > 95

Хотите лёгкий слайдер? Закажите сайт с CSS-анимациями — скорость, UX, конверсия.

Не грузится быстро? Аудит производительности — +30 баллов PageSpeed за 48 часов.