От автора: приветствую вас, уважаемый читатель. Сегодня мы с вами попробуем сделать слайдер на css3. Еще несколько лет назад такое было попросту невозможно, сегодня же это можно сделать абсолютно без помощи javascript, хотя и с некоторыми оговорками. В общем, изучайте. Тут же можно скачать исходник, чтобы посмотреть, как оно работает.
Кстати, когда мы закончим, абсолютно также вы сможете сделать в css адаптивный слайдер, всего лишь нужно будет изменить width у главного контейнера на max-width и поправить изображения.
Определяемся с фотографиями
Для начала давайте выполним не самую сложную работу – найдем в интернете фотографии, которые будут использованы в качестве слайдов. Допустим, пусть это будут животные. Я нашел три картинки (наш слайдер будет очень простым, на три слайда): льва, тигра и пантеры. Нужно их привести к нужным размерам.
Соответственно, вы должны определить, какой будет размер слайдера. Например, 500 пикселей в ширину и 350 в высоту. Позже мы запишем это в стили, сейчас просто планируем.
Начинаем с базовой разметки
Хорошо, картинки выбраны и подготовлены, мини-план в голове имеется, начинаем с простого html-кода:
|
1 2 |
<div class = "wrap"> </div> |
Пусть это будет главный контейнер, в котором будет лежать наш будущий слайдер и кнопки для управления им. Всю остальную разметку, которую я буду показывать, нужно добавлять в него.
|
1 2 3 |
<input type="radio" name="slides" id="point1" checked> <input type="radio" name="slides" id="point2"> <input type="radio" name="slides" id="point3"> |
Мы создали три радиокнопки, одна из них будет отмечена по умолчанию. Каждая из них получает свой, уникальный идентификатор. Чуть позже мы добавим к ним подписи.
Также нужно добавить в разметку сами блоки для слайдов:
|
1 2 3 4 5 |
<div class="slider"> <div class="slides img1"></div> <div class="slides img2"></div> <div class="slides img3"></div> </div> |
Как видим, они попадают в отдельный контейнер.
В отдельном блоке создается три так называемых подписи к этим кнопкам, но в данном случае они будут служить нам для другого.
С помощью атрибута for связываем каждую подпись с одной из кнопок, это позволит нам красиво оформить их. Не сами радиокнопки, потому что на них, к сожалению, стили не действуют, а лейблы. Связка позволяет сделать так, что при клике на подпись автоматически становится выбранной и радио-кнопка, что для нас очень полезно.
|
1 2 3 4 5 |
<div class="control"> <label for="point1"></label> <label for="point2"></label> <label for="point3"></label> </div> |
Начинаем все это стилизовать в css
Для начала нужно задать стили для общего контейнера.
|
1 2 3 4 5 6 |
.wrap { height: 350px; margin: 50px auto 0; position: relative; width: 500px; } |
Так мы добиваемся для него ранее запланированных размеров, а также дадим небольшой отступ сверху и относительное позиционирование, чтобы внутри контейнера все элементы можно было позиционировать абсолютно.
Следующим действием скрываем со страницы радиокнопки, все равно оформить мы их не можем и толку от них нет.
|
1 2 3 |
.wrap > input { display: none; } |
Следующий шаг – мы оформляем сам блок-слайдер и его содержимое – слайды.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.slider { background-color: #333; height: inherit; overflow: hidden; position: relative; width: inherit; } .slides { height: inherit; opacity: 0; position: absolute; width: inherit; z-index: 0; } |
Задав ширину и высоту со значением inherit мы практически указываем, чтобы браузер брал эти значения у блока wrap. Таким образом, эти блока получат ширину 500 и высоту 350 пикселей, как нам и нужно.
Далее указываем каждому слайду свое фоновое изображение. Поскольку им указана прозрачность, то мы не увидим пока никаких изменений. Правда, если поменять opacity с 0 на 1, то мы увидим нашу пантеру в качестве фона, по давайте вернем прозрачность на 0.
|
1 2 3 |
.img1 { background-image: url(lion.jpg); } .img2 { background-image: url(tiger.jpg); } .img3 { background-image: url(pantera.jpg); } |
Оформляем подписи (а по сути наши переключатели)
Для начала нужно их расположить примерно по центру. Я сделал это с помощью абсолютного позиционирования и отрицательного внешнего отступа. Есть такое правило центровки с помощью абсолютного позиционирования: задай координату left: 50%, после чего сделай отрицательный отступ слева на половину ширины элемента.
|
1 2 3 4 5 |
.wrap .control { position: absolute; margin-left: -50px; left: 50%; } |
Эти правила стилизуют наш лейбл, а с помощью псевдоэлемента мы создадим для кнопок рамки и спозиционируем их.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.wrap label { cursor: pointer; display: inline-block; height: 8px; margin: 10px; position: relative; width: 8px; border-radius: 20%; } .wrap label:after { border: 2px solid green; content: " "; display: block; height: 12px; left: -4px; position: absolute; top: -4px; width: 12px; border-radius: 20%; } |
Также добавили закругление в 20%. Сейчас вы увидите только три зеленых квадратика, теперь остается сделать так, чтобы при клике по ним в них менялись стили. Для реализации всего этого вот такие нам нужны волшебные селекторы:
|
1 2 3 4 5 |
#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: green; } |
А происходит вот что. По умолчанию наши лейблы (квадратики) белые и их не видно, только зеленые рамки. Этими селекторами мы как бы говорим браузеру: если кнопка #point1 выбрана пользователем, измени стили лейблу под номером 1, если же выбрана #point2, примени этот стиль для второго лейбла. Я понимаю, что вам возможно, трудно все это осознать, если вы новичок. В этом примере использовано два псевдокласса, а также символ ~ который позволяет выбрать элементы, лежащие за указанным перед ним селектором. Несколько простых примеров вам, чтобы было понятней:
Div ~ p – выберет все абзацы, которые в разметке находятся после дивов.
#wrap ~ .item – все элементы с классом item, которые в разметке находятся дальше блока с идентификатором wrap. Те, что перед этим блоком, выбраны не будут.
Я думаю, теперь вам стало понятно. Ну а псевдокласс :checked является одним из нововведений CSS3 и позволяет применять стили в зависимости от того, выбрана ли радиокнопка или чекбокс или нет.
Итак, с разъяснениями на этом все, потому что сейчас предстоит самое главное, заставить все, наконец, заработать! Добавляем очередные волшебные селекторы:
|
1 2 3 4 5 6 |
#point1:checked ~ .slider > .img1, #point2:checked ~ .slider > .img2, #point3:checked ~ .slider > .img3 { opacity: 1; z-index: 1; } |
Тут видим использование :checked и ~ вновь, но поскольку я вам уже объяснил их, то вы можете догадаться, что делают эти селекторы. А вот, по сути, какая команда отдается браузеру: когда человек выберет первую кнопку, сделай видимым соответствующее фото. Как видите, мы меняем z-index, то есть номер слоя, а также убираем полную прозрачность, заменив ее на полную непрозрачность.
Поскольку ранее мы с вами с css прописали для каждого слайда свое фоновое изображение, теперь они будут подставляться и становиться видимыми. Автоматически после загрузки страницы в слайдере появиться изображение льва, при клике по второй кнопке – тигр, при клику по третей – пантера. Наш слайдер работает безотказно!
Та самая оговорка
В начале я говорил, что с появлением css3 можно сделать слайдер чисто за счет этой технологии, без использования скриптов, но с некоторыми оговорками. Так вот, как вы понимаете, созданный нами слайдер не будет сам переключать слайды, это возможно только до тех пор, пока человек кликает по кнопкам. Да, нужно учитывать такие ограничения.
Добавление эффектов и дополнительных слайдов
Таким образом, вы можете добавить неограниченное количество новых слайдов. Для этого вам всего лишь нужно добавить:
новую радиокнопку
новую подпись (label)
новый слайд и фотографию к нему
Плюс не забыть добавить новые селекторы в таблицу стилей. Также я хотел бы сказать, что в этой статье мы с вами реализовали очень простой слайдер. Без наворотов, как говорится.
Добавить эффекты на самом деле не очень сложно. Всего лишь добавьте плавный переход к слайдам, а также желаемые преобразования.
|
1 2 3 4 5 |
.slides{ transform: rotate(55deg); -webkit-filter: hue-rotate(90deg); transition: 1s; } |
Теперь фотографии наклонены на 55 градусов, а также к ним применен поворот цвета в 90 градусов. Но из-за того, что слайды по умолчанию скрыты, мы всего этого не увидим. Так и нужно, зато мы увидим отмену этих эффектов, когда будет переключать слайды. Поскольку задан плавный переход, отмена эффектов будет происходить плавно, и мы увидим, как фотографии поврачиваются в нормальное состояние, а также увидим переливание цветов.
|
1 2 3 4 5 6 7 8 |
#point1:checked ~ .slider > .img1, #point2:checked ~ .slider > .img2, #point3:checked ~ .slider > .img3{ opacity: 1; z-index: 1; transform: none; -webkit-filter: none; } |
Поняли суть? Мы задали эффект невидимым изображениям, а при их появлении мы успеваем заметить отмену эффектов. Тут я, конечно, не использовал все необходимые вендорные префиксы, чтобы все работало и в более старых браузерах, но это только ради экономии места и времени. В общем, добавление этих эффектов я сделал только ради примера, на деле мы можете добавить свои эффекты, какие захотите.
Пожалуй, на этом я закончу сегодняшнюю статью. Мы с вами сделали слайдер с красивым эффектов перелистывания появления новых фотографий. Конечно, он имеет явные минусы, но зато это слайдер на чистом css3. Ну а узнать больше об этой технологии вы можете из нашего курса, там же вы можете лучше разобраться с новыми селекторами.
Комментарии (3)