Как сделать адаптивный слайдер на css3?

результатПриветствую вас вновь на моем блоге. Сегодня в css благодаря новым селекторам появилась возможность делать слайдер без скриптов. Итак, в этой статье я покажу вам, как сделать адаптивный слайдер на css3?

План урока

Итак, сегодня я очень подробно покажу вам, как создать свой слайдер без скриптов, адаптировать его под любые устройства и легко менять в будущем его внешний вид, а также добавлять новые слайды. Мы сделаем всего 3 слайда, которые будут переключаться вручную при клике на кнопки. Что ж, приступим!

Разметка слайдера

В первую очередь необходимо понять, какой будет разметка. На этом скриншоте вы можете увидеть мой пример разметки, по ней и я буду сегодня работать.разметка
Также я продублирую все это кодом, чтобы вы могли скопировать и вставить себе.
Первым делом нужно создать кнопки переключатели слайдов. Поскольку слайда будет три, то столько же нужно и кнопок:

<input type="radio" name="slides" id="point1" checked>
<input type="radio" name="slides" id="point2">
<input type="radio" name="slides" id="point3">

Каждая получает свой, уникальный идентификатор, а одна выбрана по умолчанию.

Далее нужно создать сам слайдер и слайды для него. Сразу скажу, в качестве изображений я выбрал 3 автомобиля, именно поэтому классы начинаются на auto.

<div class="slider">
	<div class="slides auto1"></div>
        <div class="slides auto2"></div>
        <div class="slides auto3"></div>
</div>

Последний кусок кода, который нам нужен. Он выводит подписи к кнопкам, но на самом деле мы используем их для того, чтобы скрыть кнопки по умолчанию (радио кнопки не оформляются через стили) и вместо них поставить эти блоки-подписи, которые можно оформить. Именно они и будут служить кнопками-переключателями, а связка с radio-кнопками делается через специальный атрибут for.

<div class="control">
	<label for="point1"></label>
	<label for="point2"></label>
	<label for="point3"></label>
</div>

А теперь весь этот код нужно обернуть в один общий контейнер. Пусть это будет блок с классом wrap.

Начинаем создавать слайдер — первоначальные стили для страницы

Итак, для начала мы зададим общие стили, которые помогут сбросить все отступы по умолчанию, а заодно и сделать так, чтобы внутренние отступы и рамки учитывались в ширине элементов. Это делается так:

* {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
}

К слову, * — означает все селекторы. То есть такой универсальный и глобальный селектор.

Оформляем контейнер. Именно сам блок, который содержит в себе все 3 наши важные части — кнопки, слайды и подписи.

.wrap {
	height: 350px;
	margin: 0 auto;
	position: relative;
	width: 600px;
}

Ширину и высоту вы можете выставлять ЛЮБУЮ, в зависимости от того, каких размеров будут ваши фотографии для слайдов. Я заранее обрезал фотографии до размеров 600 на 350 пикселей, поэтому и указываю такие размеры. Margin: 0 auto выравняет контейнер ровно по центру страницы, а относительное позиционирование позволит точно разместить кнопки в самом контейнере позднее.

Оформляем слайдер и слайды

Вначале вот такие стили:

.slider {
	background-color: #999;
	height: inherit;
	overflow: hidden;
	position: relative;
	width: inherit;
}

Укажем слайдеру такие же ширину и высоту, как и общему контейнеру. Также указываем цвет и позиционирование, а свойство overflow: hidden обрезает все, что не попадает в блок.

Следующим делом нужно оформить сами слайды:

.slides {
	height: inherit;
	opacity: 0;
	position: absolute;
	width: inherit;
	z-index: 0;
}
.auto1 { background-image: url(bmw.jpg); }
.auto2 { background-image: url(audi.jpg); }
.auto3 { background-image: url(porshe.jpg); }

Также указываем ширину и высоту как и у слайда. Значение inherit позволяет наследовать значение родительского блока. С помощью свойств z-index и opacity мы сделаем наши картинки невидимыми. Ниже мы четко прописываем фоновые изображения.

Пока что мы ничего не увидим, только серый фон, потому что наши изображения скрыты.поле для слайда

Оформляем кнопки переключатели

Теперь нужно убрать стандартные радио-кнопки и вместо них стилизовать подписи.

.wrap > input {
	display: none;
}

Убираем радио-кнопки.

.wrap .control {
	position: absolute;
	margin-left: -50px;
	left: 50%;
}

С помощью этих стилей мы отцентрируем блок с кнопками по центру.

.wrap label {
	cursor: pointer;
	display: inline-block;
	height: 25px;
	margin: 10px;
	position: relative;
	width: 25px;
	border: 2px solid grey;
	border-radius: 30%/10px;
}

Эти стили делают очень важное дело — они позволяют нам оформить кнопки. Нужно задать размеры кнопок, установить для них блочно-строчный тип, отступы и серую рамку. Еще можно добавить скругление углов.
будущие кнопки
Теперь у нас есть три кнопки по центру ниже слайдов, это просто серые рамки. Давайте сделаем так, чтобы при клике по кнопке в ней появлялось какое-нибудь изображение, свидетельствующее о том, что кнопка активна в данный момент. Кстати, такой же прием, только с чекбоксами, я показываю в этой статье.

Поскольку мы с вами переключаем изображения автомобилей, я нашел в сети иконку руля, уменьшил ее до размеров примерно 20 на 20.wheel Теперь дело замалым — добавлять фоновое изображение кнопке, если на нее кликнули.

#point1:checked ~ .control label:nth-of-type(1),
#point2:checked ~ .control label:nth-of-type(2),
#point3:checked ~ .control label:nth-of-type(3) {
	background: url(wheel.png) no-repeat 50% 50%;
}

Это делается с помощью таких селекторов. Что они делают? По сути, это сложный селектор, в нем записано целое условие. Это чем-то похоже на программирование. Он обозначает следующее: если радио-кнопка выбрана, то нужно применить стиль к подписи, которая идет где-то дальше в разметке. Теперь при клике на кнопки у них внутри появляется изображение руля!кнопки

Самый важный этап — заставляем работать переключение!

На самом деле нам осталось сделать совсем чуть-чуть. А именно, сделать так, чтобы вместо серой области в слайдере появились изображения с автомобилями, которые бы успешно перелистывались. Для этого нужно применить еще одни сложные селекторы:

#point1:checked ~ .slider > .auto1,
#point2:checked ~ .slider > .auto2,
#point3:checked ~ .slider > .auto3 {
	opacity: 1;
	z-index: 1;
}

Что происходит? Сейчас, если вы попробуете слайдер в действии, он будет полностью рабочим. Этими селекторами мы указываем следующее: если нажата радио-кнопка, сделай видимым нужный слайд, который лежит где-то дальше в html-коде (дальше радио-кнопок).

Таким образом, при клике на первую кнопку, нам показывается автомобиль BMW, при клике на вторую — Audi, при клике на третью — Porshe. А еще все это время при переключении иконка руля появляется в той кнопке, слайд для которой активен.
слайдер на css3
Итак, мы сделали слайдер. Осталось его адаптировать.

Адаптируем слайдер под просмотр на мобильных устройствах

Пока наш слайдер имеет фиксированную ширину в 600 пикселей. Соответственно, на экранах меньше этой ширины начнут возникать проблемы. В частности, появится горизонтальная полоса прокрутки. Чтобы этого избежать, нам совсем чуть-чуть нужно подправить уже написанный код. Вот что нужно изменить:

  1. Для блока wrap, то есть главного контейнера, задать не width, а max-width: 600px. Это позволит контейнеру сжиматься, если окно становиться меньше по ширине.
  2. Слайдеру (slider) необходимо прописать width: 100%;
  3. У слайдов (slides) ничего не изменяем.

Итого все изменения можно увидеть в этом коде:

.wrap{
	max-width: 600px;
}
.slider{
	width: 100%;
}

Отлично, теперь осталось прописать пару медиа-запросов, чтобы сделать слайдер полностью адаптивным, а также масштабировать изображения под новые экраны. Экспериментальным путем я выяснил, что картинка-слайд начинает не помещаться на экране примерно при ширине окна в 600 пикселей. Значит, примерно на этом участке и нужно сделать изменение стилей. Для этого напишем первый медиа-запрос.

Кстати, подробно о медиа-запросах и их применении я написал в этой статье. Советую ознакомиться с ней тем, у кого нет никакого представления об адаптивном дизайне.

Соответственно, чтобы на ширине 650 пикселей и меньше все отображалось хорошо, я предлагаю такое изменение стилей:

@media screen and (max-width: 650px){
	.wrap{
		max-width: 480px;
		height: 280px;
	}
	.slides{
		background-size: cover;
	}
}

Ширина самого слайдера уменьшится, также уменьшится и высота. Для самих слайдов мы прописали свойство, которое масштабирует изображения так, чтобы они сохраняя свои пропорции полностью помещались в слайдер, не обрезаясь при этом.

Отлично, теперь вы можете проверить и убедиться, что при ширине менее 650 пикселей слайдер трансформируется и выглядит хорошо, не обрезая картинку.

Последняя точка — ширина примерно в 400 пикселей. На ней наша картинка опять начинает не помещаться и нужно предпринимать меры. Для этого напишу еще один медиа-запрос:

@media screen and (max-width: 400px){
	.wrap{
		max-width: 320px;
		height: 180px;
	}
	.slides{
		background-size: cover;
	}
}

Все то же самое, только вновь уменьшаем ширину и высоту контейнера. Отлично, теперь наш слайдер полностью адаптивный! Даже на мобильном телефоне с шириной 320 пикселей он будет смотреться отлично. Впрочем, смотрите сами:адаптивный слайдер

Благодаря медиа-запросам изображения пропорционально уменьшаются, сохраняя свои пропорции.

Добавляем слайдеру эффекты при переходах

Можно прописать слайдам какой-нить эффект при переходах (.slides), а при появлении изображения отменять действие эффекта. Чтобы увидеть результат, вам нужно обязательно задать слайдам свойство transition, чтобы переходы были плавными. Пример эффекта:

.slides{
	transform: rotate(50deg);
	transition: 1s;
}

Теперь достаточно селектору, который делает слайд видимым, прописать отмену трансформации:

#point1:checked ~ .slider > .auto1{
        transform: none;
}

И так сделать для всех слайдов. Соответственно, изначально изображение будет повернуто и будет невидимо, а при его появление будет возникать эффект плавного возвращения в исходное положение. Соответственно, вы можете придумать свои эффекты. Что ж, слайдер мы сделали, на этом у меня все. Если у вас есть вопросы, жду в комментариях.

Как сделать так, чтобы при клике по слайду происходил переход по привязанной к слайду ссылке?

Иными словами, сейчас у нас просто картинки, а как сделать их кликабельными. Для этого у вас уже должен быть готовый слайдер по этому уроку. Далее вам в html-коде нужно найти кусок, отвечающий за сами слайды. Вот он на скриншоте:
ссылки внутри слайдов
Как видите, я вставил внутрь первого и второго слайда ссылки. Итак, при клике на первый слайд произойдет переход на Гугл, при клике на второй — на Яндекс. Хочу отметить, что ссылка будет открываться в этом же окне, то есть текущая страница со слайдером в таком случае исчезнет. Если вам нужно открывать ссылки со слайдов в новом окне, в каждый тег <a> необходимо добавить атрибут target = "_blank".

Но это не все, что нужно сделать! Сейчас еще ничего не работает, чтобы картинки стали кликабельны, нужно добавить в css вот что:

.slides a{
	display: block;
	width: 100%;
	height: 100%;
}

То есть для всех слайдов делаем ссылку блочным элементом, и указываем ей ширину и высоту 100%, чтобы она занимала все пространство картинки. Теперь все должно работать, можете проверить. Просто замените адреса в ссылках и можно пользоваться.

Альтернативный css3 слайдер на анимационных эффектах

css3 слайдер

Другой пример css3 слайдера. В этот раз мы сделаем его за счет анимации. В целом, это получится даже проще, чем первым способом.

Создание слайдера с помощью keyframes

Начать нужно с html-разметки. В этом случае она будет совсем простой, всего один блок с идентификатором:

<div id = "slider"></div>

Для слайдов я подготовил 3 картинки одинаковых размеров. В моем случае получилось 448 пикселей в ширину и 251 в длину. Это размеры картинок. Я рекомендую вам, чтобы все размеры были одинаковы, тогда вообще никаких проблем с нашим слайдером не будет.

Соответственно, далее я указываю некоторые css-стили блоку:

#slider{
	width: 448px;
	height: 251px;
	margin: 0 auto;
	background: url(1.jpg);
}

Я задал ему размеры такие же, как у каждой картинки, сделал по центру родительского блока, а также уже задал в качестве фона первую картинку. Теперь все выглядит так:
1
У нас просто фоновая картинка в блоке, и больше ничего. Для простоты я сохранил картинки, которые использую в этом примере под названиями 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 смена картинок без вмешательства пользователя вполне возможна.

Понравилась статья? Поделиться с друзьями:
Комментариев: 13
  1. Дмитрий

    Посмотрите пожалуйста, слайдер на css с авто воспроизведением, но есть один минус не могу сделать его на весь монитор, если задать 100% он перестает отображаться, можно ли его сделать адаптивным и на весь монитор?

    codepen.io/Mitai/pen/BwxeBg

    1. Михаил (автор)

      Слайдам задайте свойство max-width:100%; — будет адаптивно. А слайдер не на всю ширину потому, что сами картинки максимум 900 пикселей в ширину. Вам нужно просто картинки побольше загрузить, 1600—1900 пикселей в ширину.

      1. Дмитрий

        а сам контейнер как сделать на весь монитор? если задать ему свойство max-width:100%; он перестает отображаться, не могли бы вы показать в том же кодепене?

        1. Михаил (автор)

          У меня не перестает отображаться.

  2. Денис

    А объединить автоматический и ручной слайдеры возможно?

    1. Михаил (автор)

      думаю да, нужно посидеть и подумать smile

  3. Мозг

    Очень круто, что такое возможно на css. Причем кроссбраузерно

  4. Дмитрий

    Миш, привет! Хорошая штука. И вдвойне круто, что не нужно ставить плагин.

    1. Михаил (автор)

      Привет. Работает хорошо, но человеку придется вручную переключать слайды. Я буквально сегодня вспомнил, что на css можно даже сделать слайдер, который будет сам переключаться, напишу об этом в ближайшее время.

      1. Ирина

        Михаил, здравствуйте!

        Отличная статья! Вы уже написали, как сделать, чтобы слайды сами переключались? А еще — как сделать, чтобы при клике на слайд происходил переход по привязанной к слайду ссылке?

        Спасибо вам!

        1. Михаил (автор)

          Здравствуйте Ирина! Специально для вас дописал эту статью, смотрите самый последний подзаголовок. Это что касается ручного переключения слайдов. Я уже написал об автоматической смене слайдов здесь — dolinacoda.ru/alternativn...ionnyh-effektah/ . Но дело в том, что тот способ годится для простого переключения картинок. Если же вы хотите 2 в 1: и чтобы слайды автоматом переключались, и чтобы можно было кликать по ссылкам, прикрепленным к ним, я думаю, что это вполне возможно сделать, просто нужно посидеть подумать какое-то время smile

          Если что, в ближайшее время (1-2 дня) я допишу ту вторую статью про автоматическую смену слайдов и добавлю туда информацию, как прикрепить к слайдам ссылки. Тогда я вам отвечу сюда smile

          1. Дмитрий

            Доброго времени суток, подскажите пожалуйста, что нужно прописать что бы данный слайдер отображался на весь монитор, и при этом был адаптивным.

            codepen.io/Mitai/pen/BwxeBg

  5. Валерий

    Здравствуйте, Михаил! Сегодня довольно объемная статья, но все также интересная и полезная!!!

Добавить комментарий