Всем привет. Сегодня я покажу вам другой пример css3 слайдера. В этот раз мы сделаем его за счет анимации. Ранее я уже писал статью о создании слайдера на чистом css, но сегодня я покажу немного другой прием.
Если вы читали ту статью полностью, то я там говорил о том, что на css нельзя сделать слайдер, который менял бы картинки автоматически, без участия пользователя. Так вот, я был не прав! Просто я забыл, что в css3 существует анимация, с помощью которой мы и сделаем сегодня наш альтернативный слайдер. В целом, это получится даже проще, чем другим способом.
Создание слайдера с помощью keyframes
Начать нужно с html-разметки. В этом случае она будет совсем простой, всего один блок с идентификатором:
<div id = "slider"></div>
Для слайдов я подготовил 3 картинки одинаковых размеров. В моем случае получилось 448 пикселей в ширину и 251 в длину. Это размеры картинок. Я рекомендую вам, чтобы все размеры были одинаковы, тогда вообще никаких проблем с нашим слайдером не будет.
Соответственно, далее я указываю некоторые css-стили блоку:
#slider{
width: 448px;
height: 251px;
margin: 0 auto;
background: url(1.jpg);
}
Я задал ему размеры такие же, как у каждой картинки, сделал по центру родительского блока, а также уже задал в качестве фона первую картинку. Теперь все выглядит так:
У нас просто фоновая картинка в блоке, и больше ничего. Для простоты я сохранил картинки, которые использую в этом примере под названиями 1, 2 и 3.
А вот теперь начинается самое интересное. Самое время прописать ту самую анимацию, которая заставит фоновое изображение изменяться. Это делается с помощью конструкции @keyframes.
@keyframes slider{
0%{ background: url(1.jpg);}
33%{ background: url(2.jpg);}
66%{ background: url(3.jpg);}
}
Давайте подробнее рассмотрим этот кусок кода. К слову, его нужно поместить в css-файл. После ключевого слова @keyframes идет имя анимации, оно может быть абсолютно любым, но в нем могут быть только латинские символы. Далее открываются фигурные скобки и уже в них записывается каждый отдельный анимационный эффект.
Что же мы тут видим? Во-первых, сначала указывается временной отрезок в анимации, а потом в фигурных скобках пишутся свойства, которые должны применяться в этот момент. Мы как бы говорим браузеру, что в самом начале анимации фоном должно быть изображение 1.jpg, далее на трети выполнения анимации оно должно быть изменено на 2.jpg, ну и ближе к концу опять на другое изображение.
Отлично, мы уже все прописали. Можете сохранить файл и обновить страницу, но ничего не изменится. Все потому, что вы всего лишь описали анимационные эффекты, но не связали их с нужным блоком. А я напомню, нам нужно связать написанный @keyframes с блоком #slider. Помните, мы ему прописывали стили, самое время добавить еще парочку. В частности, связка с анимацией происходит с помощью двух обязательных свойств:
animation-name: slider;
animation-duration: 7s;
Это все сразу расставляет по своим местам! Во-первых, мы связываем анимацию slider с блоком. Во-вторых, указываем время ее выполнения. Теперь браузер понимает процентную запись и может в нужное время менять фон блока.
Попробуйте обновить страницу и вы увидите, что все работает! Возможно, у вас другие изображения (не обезьяны), но суть не в этом. Однако анимация выполнится всего лишь один раз, после чего смена картинок перестанет выполняться. А это явно не то, что нам нужно.
Решается эта проблема очень просто — нужно добавить свойство, которое установит количество повторений анимации, как бесконечное. Вот оно:
animation-iteration-count: infinite;
Как вы понимаете, вместо значения infinite может быть конкретное число повторов, которое вам нужно. Таким образом картинки будут меняться постоянно, а вы теперь можете сделать автоматический слайдер с картинками на чистом css. И хотя их нельзя переключать вручную, все равно этот прием может применяться в сайтостроении, поэтому очень полезно о нем знать. Что ж, это был альтернативный способ создать слайдер без скриптов. Если у вас остались какие-то вопросы, прошу задавать их в комментарии.
Как видите, в css смена картинок без вмешательства пользователя вполне возможна. Надеюсь, эта информация была для вас полезной.