Создание слайдера изображений на CSS: Тренажер CSS

Тренажер по CSS для пользователей с начальным уровнем подготовки.

В этой серии заданий вы попрактикуетесь в создании простого автоматического слайдера изображений, используя только HTML и CSS. Вы начнете с базовой разметки и стилей, постепенно добавляя необходимые CSS-свойства для создания эффекта прокрутки изображений. Задания охватывают такие темы, как управление переполнением (`overflow`), модель flexbox (`display: flex`), CSS-анимации (`@keyframes`, `animation`) и псевдоклассы (`:hover`). Вам нужно будет заполнить пропущенные части CSS-кода, чтобы заставить слайдер работать.

Список тем

Основа слайдера: Контейнер

Создайте базовую структуру для слайдера. У вас есть контейнер (`<div class="slider">`), внутри которого находятся изображения. Начните с того, чтобы ограничить видимую область контейнера его собственными размерами, скрыв любое содержимое, выходящее за его пределы.

CSS

.slider {
  width: 100%;
  max-width: 350px; /* Ограничим ширину для iframe */
  height: 200px;
  margin: 20px auto;
  /* Скройте содержимое, выходящее за пределы контейнера */
  input1: hidden;
  border: 1px solid #ccc;
}

.slides {
  /* Стили для обертки слайдов будут добавлены позже */
  height: 100%;
}

.slide {
  /* Стили для отдельных слайдов будут добавлены позже */
  height: 100%;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Масштабируем изображение с сохранением пропорций */
}

                     .slider {
  width: 100%;
  max-width: 350px; /* Ограничим ширину для iframe */
  height: 200px;
  margin: 20px auto;
  /* Скройте содержимое, выходящее за пределы контейнера */
  input1: hidden;
  border: 1px solid #ccc;
}

.slides {
  /* Стили для обертки слайдов будут добавлены позже */
  height: 100%;
}

.slide {
  /* Стили для отдельных слайдов будут добавлены позже */
  height: 100%;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Масштабируем изображение с сохранением пропорций */
}

HTML

<div class="slider">
  <div class="slides">
    <div class="slide"><img src="https://naytikurs.ru/img/1.png" alt="Image 1"></div>
    <div class="slide"><img src="https://naytikurs.ru/img/2.png" alt="Image 2"></div>
    <div class="slide"><img src="https://naytikurs.ru/img/4.png" alt="Image 3"></div>
    <div class="slide"><img src="https://naytikurs.ru/img/5.png" alt="Image 4"></div>
    <!-- Добавим первый слайд еще раз для плавного зацикливания -->
    <div class="slide"><img src="https://naytikurs.ru/img/1.png" alt="Image 1"></div>
  </div>
</div>

Чтобы скрыть содержимое, которое не помещается в блок, используйте свойство `overflow` со значением `hidden`. Примените это свойство к селектору `.slider`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Расположение слайдов в ряд

Сейчас все изображения отображаются друг под другом. Чтобы создать эффект ленты, необходимо расположить все слайды (`<div class="slide">`) горизонтально в один ряд внутри их обертки (`<div class="slides">`). Используйте для этого возможности Flexbox.

CSS

.slider {
  width: 100%;
  max-width: 350px;
  height: 200px;
  margin: 20px auto;
  overflow: hidden;
  border: 1px solid #ccc;
}

.slides {
  /* Расположите слайды в ряд */
  input1: flex;
  height: 100%;
  /* Ширина будет добавлена в следующем задании */
}

.slide {
  height: 100%;
  /* Ширина будет добавлена позже */
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

                     .slider {
  width: 100%;
  max-width: 350px;
  height: 200px;
  margin: 20px auto;
  overflow: hidden;
  border: 1px solid #ccc;
}

.slides {
  /* Расположите слайды в ряд */
  input1: flex;
  height: 100%;
  /* Ширина будет добавлена в следующем задании */
}

.slide {
  height: 100%;
  /* Ширина будет добавлена позже */
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

HTML

<div class="slider">
  <div class="slides">
    <div class="slide"><img src="https://naytikurs.ru/img/1.png" alt="Image 1"></div>
    <div class="slide"><img src="https://naytikurs.ru/img/2.png" alt="Image 2"></div>
    <div class="slide"><img src="https://naytikurs.ru/img/4.png" alt="Image 3"></div>
    <div class="slide"><img src="https://naytikurs.ru/img/5.png" alt="Image 4"></div>
    <div class="slide"><img src="https://naytikurs.ru/img/1.png" alt="Image 1"></div>
  </div>
</div>

Примените к обертке слайдов (`.slides`) свойство `display` со значением `flex`. Это заставит дочерние элементы (`.slide`) выстроиться в ряд.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Ширина обертки слайдов

Чтобы все слайды поместились в одну горизонтальную линию внутри обертки (`.slides`), ширина обертки должна быть достаточной. В нашем случае 5 слайдов (4 уникальных + 1 копия первого для зацикливания). Каждый слайд должен занимать 100% ширины видимой области (`.slider`). Задайте обертке `.slides` соответствующую ширину.

CSS

.slider {
  width: 100%;
  max-width: 350px;
  height: 200px;
  margin: 20px auto;
  overflow: hidden;
  border: 1px solid #ccc;
}

.slides {
  display: flex;
  height: 100%;
  /* Задайте ширину, достаточную для 5 слайдов */
  input1: 500%; 
}

.slide {
  height: 100%;
  /* Ширина будет добавлена в следующем задании */
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

                     .slider {
  width: 100%;
  max-width: 350px;
  height: 200px;
  margin: 20px auto;
  overflow: hidden;
  border: 1px solid #ccc;
}

.slides {
  display: flex;
  height: 100%;
  /* Задайте ширину, достаточную для 5 слайдов */
  input1: 500%; 
}

.slide {
  height: 100%;
  /* Ширина будет добавлена в следующем задании */
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

HTML

<div class="slider">
  <div class="slides">
    <div class="slide"><img src="https://naytikurs.ru/img/1.png" alt="Image 1"></div>
    <div class="slide"><img src="https://naytikurs.ru/img/2.png" alt="Image 2"></div>
    <div class="slide"><img src="https://naytikurs.ru/img/4.png" alt="Image 3"></div>
    <div class="slide"><img src="https://naytikurs.ru/img/5.png" alt="Image 4"></div>
    <div class="slide"><img src="https://naytikurs.ru/img/1.png" alt="Image 1"></div>
  </div>
</div>

Поскольку у нас 5 слайдов, и каждый должен занимать 100% ширины контейнера `.slider`, общая ширина обертки `.slides` должна быть 500%. Используйте свойство `width`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Ширина отдельного слайда

Каждый отдельный слайд (`.slide`) должен занимать всю ширину видимой области контейнера (`.slider`). Установите соответствующую ширину для селектора `.slide`.

CSS

.slider {
  width: 100%;
  max-width: 350px;
  height: 200px;
  margin: 20px auto;
  overflow: hidden;
  border: 1px solid #ccc;
}

.slides {
  display: flex;
  height: 100%;
  width: 500%;
}

.slide {
  /* Задайте ширину, равную ширине видимой области */
  input1: 100%;
  height: 100%;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

                     .slider {
  width: 100%;
  max-width: 350px;
  height: 200px;
  margin: 20px auto;
  overflow: hidden;
  border: 1px solid #ccc;
}

.slides {
  display: flex;
  height: 100%;
  width: 500%;
}

.slide {
  /* Задайте ширину, равную ширине видимой области */
  input1: 100%;
  height: 100%;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

HTML

<div class="slider">
  <div class="slides">
    <div class="slide"><img src="https://naytikurs.ru/img/1.png" alt="Image 1"></div>
    <div class="slide"><img src="https://naytikurs.ru/img/2.png" alt="Image 2"></div>
    <div class="slide"><img src="https://naytikurs.ru/img/4.png" alt="Image 3"></div>
    <div class="slide"><img src="https://naytikurs.ru/img/5.png" alt="Image 4"></div>
    <div class="slide"><img src="https://naytikurs.ru/img/1.png" alt="Image 1"></div>
  </div>
</div>

Поскольку обертка `.slides` является flex-контейнером, а ее ширина составляет 500%, чтобы каждый из 5 слайдов занимал ровно 1/5 этой ширины (что равно 100% ширины `.slider`), нужно установить для `.slide` ширину 100%. Это значение будет рассчитано относительно родительского flex-контейнера, но из-за общей ширины в 500%, каждый слайд займет как раз ширину видимой области. Используйте свойство `width`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Добавление анимации

Теперь добавим анимацию для прокрутки слайдов. Примените к обертке `.slides` CSS-анимацию. Задайте имя анимации (например, `slide`), продолжительность (например, 15 секунд), временную функцию (линейную) и количество повторений (бесконечное).

CSS

.slider {
  width: 100%;
  max-width: 350px;
  height: 200px;
  margin: 20px auto;
  overflow: hidden;
  border: 1px solid #ccc;
}

.slides {
  display: flex;
  height: 100%;
  width: 500%;
  /* Добавьте анимацию */
  input1: slide 15s linear infinite;
}

.slide {
  width: 100%;
  height: 100%;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Определение @keyframes будет в следующем задании */

                     .slider {
  width: 100%;
  max-width: 350px;
  height: 200px;
  margin: 20px auto;
  overflow: hidden;
  border: 1px solid #ccc;
}

.slides {
  display: flex;
  height: 100%;
  width: 500%;
  /* Добавьте анимацию */
  input1: slide 15s linear infinite;
}

.slide {
  width: 100%;
  height: 100%;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Определение @keyframes будет в следующем задании */

HTML

<div class="slider">
  <div class="slides">
    <div class="slide"><img src="https://naytikurs.ru/img/1.png" alt="Image 1"></div>
    <div class="slide"><img src="https://naytikurs.ru/img/2.png" alt="Image 2"></div>
    <div class="slide"><img src="https://naytikurs.ru/img/4.png" alt="Image 3"></div>
    <div class="slide"><img src="https://naytikurs.ru/img/5.png" alt="Image 4"></div>
    <div class="slide"><img src="https://naytikurs.ru/img/1.png" alt="Image 1"></div>
  </div>
</div>

Используйте свойство `animation`. Задайте ему значение, включающее имя анимации (`slide`), длительность (`15s`), временную функцию (`linear`) и количество повторений (`infinite`). Например: `animation: slide 15s linear infinite;`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Определение кадров анимации

Анимация применена, но пока не знает, что делать. Определите ключевые кадры (`@keyframes`) для анимации с именем `slide`. Анимация должна сдвигать обертку `.slides` влево так, чтобы последовательно отображались все 4 уникальных изображения, а затем плавно возвращаться к началу (используя пятый слайд-копию).

CSS

.slider {
  width: 100%;
  max-width: 350px;
  height: 200px;
  margin: 20px auto;
  overflow: hidden;
  border: 1px solid #ccc;
}

.slides {
  display: flex;
  height: 100%;
  width: 500%;
  animation: slide 15s linear infinite;
}

.slide {
  width: 100%;
  height: 100%;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Определите ключевые кадры для анимации 'slide' */
input1 slide {
  0% {
    input2: translateX(0%);
  }
  100% {
    /* Сдвиг влево на 4 слайда (4/5 = 80% ширины .slides) */
    input2: translateX(-80%); 
  }
}

                     .slider {
  width: 100%;
  max-width: 350px;
  height: 200px;
  margin: 20px auto;
  overflow: hidden;
  border: 1px solid #ccc;
}

.slides {
  display: flex;
  height: 100%;
  width: 500%;
  animation: slide 15s linear infinite;
}

.slide {
  width: 100%;
  height: 100%;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Определите ключевые кадры для анимации 'slide' */
input1 slide {
  0% {
    input2: translateX(0%);
  }
  100% {
    /* Сдвиг влево на 4 слайда (4/5 = 80% ширины .slides) */
    input2: translateX(-80%); 
  }
}

HTML

<div class="slider">
  <div class="slides">
    <div class="slide"><img src="https://naytikurs.ru/img/1.png" alt="Image 1"></div>
    <div class="slide"><img src="https://naytikurs.ru/img/2.png" alt="Image 2"></div>
    <div class="slide"><img src="https://naytikurs.ru/img/4.png" alt="Image 3"></div>
    <div class="slide"><img src="https://naytikurs.ru/img/5.png" alt="Image 4"></div>
    <div class="slide"><img src="https://naytikurs.ru/img/1.png" alt="Image 1"></div>
  </div>
</div>

Создайте правило `@keyframes` с именем `slide`. Внутри определите ключевые кадры. В начальном кадре (`0%`) сдвиг должен быть `translateX(0)`. В конечном кадре (`100%`) обертка должна сдвинуться влево на ширину 4 слайдов. Так как ширина обертки 500%, а одного слайда - 100% (относительно видимой области), то сдвиг должен быть на 4/5 * 100% = 80% от ширины самой обертки, т.е. `translateX(-80%)`. Используйте свойство `transform`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Пауза анимации при наведении

Слайдер работает, но было бы удобно, если бы анимация останавливалась, когда пользователь наводит курсор мыши на слайдер. Добавьте правило, которое приостанавливает анимацию обертки `.slides`, когда курсор находится над контейнером `.slider`.

CSS

.slider {
  width: 100%;
  max-width: 350px;
  height: 200px;
  margin: 20px auto;
  overflow: hidden;
  border: 1px solid #ccc;
}

.slides {
  display: flex;
  height: 100%;
  width: 500%;
  animation: slide 15s linear infinite;
}

.slide {
  width: 100%;
  height: 100%;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes slide {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-80%);
  }
}

/* Добавьте правило для паузы анимации при наведении */
input1 {
  input2: paused;
}

                     .slider {
  width: 100%;
  max-width: 350px;
  height: 200px;
  margin: 20px auto;
  overflow: hidden;
  border: 1px solid #ccc;
}

.slides {
  display: flex;
  height: 100%;
  width: 500%;
  animation: slide 15s linear infinite;
}

.slide {
  width: 100%;
  height: 100%;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes slide {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-80%);
  }
}

/* Добавьте правило для паузы анимации при наведении */
input1 {
  input2: paused;
}

HTML

<div class="slider">
  <div class="slides">
    <div class="slide"><img src="https://naytikurs.ru/img/1.png" alt="Image 1"></div>
    <div class="slide"><img src="https://naytikurs.ru/img/2.png" alt="Image 2"></div>
    <div class="slide"><img src="https://naytikurs.ru/img/4.png" alt="Image 3"></div>
    <div class="slide"><img src="https://naytikurs.ru/img/5.png" alt="Image 4"></div>
    <div class="slide"><img src="https://naytikurs.ru/img/1.png" alt="Image 1"></div>
  </div>
</div>

Используйте псевдокласс `:hover` на контейнере `.slider` в сочетании с селектором потомка для `.slides`. Внутри этого правила установите свойство `animation-play-state` в значение `paused`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку