Создание слайдера изображений на CSS [Модуль 13: Практические проекты]: Тренажер CSS

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

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

Список тем

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

id: 37528_css_slider_1_container

Создайте базовую структуру для слайдера. У вас есть контейнер (`<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`.

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

Результат

Сообщения

Выполнить

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

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

id: 37528_css_slider_2_flex

Сейчас все изображения отображаются друг под другом. Чтобы создать эффект ленты, необходимо расположить все слайды (`<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`) выстроиться в ряд.

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

Результат

Сообщения

Выполнить

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

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

id: 37528_css_slider_3_slides_width

Чтобы все слайды поместились в одну горизонтальную линию внутри обертки (`.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`.

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

Результат

Сообщения

Выполнить

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

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

id: 37528_css_slider_4_slide_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`.

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

Результат

Сообщения

Выполнить

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

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

id: 37528_css_slider_5_animation

Теперь добавим анимацию для прокрутки слайдов. Примените к обертке `.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;`.

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

Результат

Сообщения

Выполнить

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

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

id: 37528_css_slider_6_keyframes

Анимация применена, но пока не знает, что делать. Определите ключевые кадры (`@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`.

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

Результат

Сообщения

Выполнить

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

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

id: 37528_css_slider_7_hover_pause

Слайдер работает, но было бы удобно, если бы анимация останавливалась, когда пользователь наводит курсор мыши на слайдер. Добавьте правило, которое приостанавливает анимацию обертки `.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`.

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

Результат

Сообщения

Выполнить

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