[Из песочницы] Интересный и одновременно простой слайдер на чистом CSS303.03.2015 19:17

Я никому не открою Америку, не удивлю публику новым фокусом и не взорву мозг тем, кто в CSS3 плавает, как аквалангист. Расскажу простой способ, как создать слайдер с помощью простых функций CSS3 без необходимости использовая javascript.1. Верстаем основуДля реализации слайдера нам понадобится довольно простой набор тэгов, которые будут в свою очередь отвечать за элементы слайдера.

Здесь мы видим, что общий блок «wrapper» содержит в себе блок «slider» с 5-ю слайдами, внутри которых можно поместить любой html-код, который будет располагаться на слайде. Перед общим блоком находятся радио-кнопки, которые впоследствии будут скрыты, чтобы создать для них собственную панель навигации по слайдам, с которой нам помогут лейблы в блоке «controls».2. Оформляем слайдер Здесь мы остановимся и немного рассмотрим css. Обратите внимание, что для некоторых свойств проставлены кроссбраузерные префиксы, чтобы все современные браузеры могли их понимать. * { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; }

body { background-image: url (http://habrastorage.org/files/996/d76/d04/996d76d0410d422fa54cc433ce7ead2a.png); } С оформлением фона и общими стилями всё понятно. .wrapper { height: 350 px; margin: 100 px auto 0; position: relative; width: 700 px; }

.slider { background-color: #ddd; height: inherit; overflow: hidden; position: relative; width: inherit; -webkit-box-shadow: 0 0 20 px rgba (0, 0, 0, .5); -moz-box-shadow: 0 0 20 px rgba (0, 0, 0, .5); -o-box-shadow: 0 0 20 px rgba (0, 0, 0, .5); box-shadow: 0 0 20 px rgba (0, 0, 0, .5); } Общий блок и блок с слайдером имеют одинаковые размеры, чтобы идеально контролировать положение слайдера на странице. Пока отсутствуют слайды, слайдер мы временно покрасили в светло-серый цвет. .wrapper > input { display: none; } Радио-кнопки скрываем. Они нам понадобятся позже.Результат на данный момент такой:

image

3. Оформляем слайды Здесь мы пропишем общие стили для слайдов и каждый слайд отдельно: .slides { height: inherit; position: absolute; width: inherit; }

.slide1 { background-image: url (http://habrastorage.org/files/3f2/628/bd5/3f2628bd58c8452db516195cb0c9bfc9.jpg); } .slide2 { background-image: url (http://habrastorage.org/files/3e1/95d/c7f/3e195dc7f5a64469807f49a14f97ba0e.jpg); } .slide3 { background-image: url (http://habrastorage.org/files/663/6b1/d4f/6636b1d4f8e643d29eab8c192fc1cea3.jpg); } .slide4 { background-image: url (http://habrastorage.org/files/e59/424/c04/e59424c046be4dab897d84ab015c87ea.jpg); } .slide5 { background-image: url (http://habrastorage.org/files/53c/ff6/c1c/53cff6c1caf842368c70b8ef892d8402.jpg); } Для всех слайдов мы указали абсолютное позиционирование, чтобы можно было играть с эффектами появления. Размеры слайдов берутся из размера самого слайдера, чтобы не приходилось их прописывать в нескольки местах.image

4. Делаем навигацию по слайдам Так как радио-кнопки скрыты и нужны нам как переключатели, оформляем подготовленные лейблы: .wrapper .controls { left: 50%; margin-left: -98 px; position: absolute; }

.wrapper label { cursor: pointer; display: inline-block; height: 8 px; margin: 25 px 12 px 0 16 px; position: relative; width: 8 px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; }

.wrapper label: after { border: 2 px solid #ddd; content:» »; display: block; height: 12 px; left: -4 px; position: absolute; top: -4 px; width: 12 px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; } Навигацию мы делаем классической. Каждая кнопка представляет собой область в виде круга, внутри которого при активном слайде пустая область частично окрасится. Пока же у нас следующий результат: image

5. Учим кнопки нажиматься Пришло время научить слайдер переключать слайды по нажатию на определённую кнопку: .wrapper label { cursor: pointer; display: inline-block; height: 8 px; margin: 25 px 12 px 0 16 px; position: relative; width: 8 px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -webkit-transition: background ease-in-out .5s; -moz-transition: background ease-in-out .5s; -o-transition: background ease-in-out .5s; transition: background ease-in-out .5s; }

.wrapper label: hover, #slide1: checked ~ .controls label: nth-of-type (1), #slide2: checked ~ .controls label: nth-of-type (2), #slide3: checked ~ .controls label: nth-of-type (3), #slide4: checked ~ .controls label: nth-of-type (4), #slide5: checked ~ .controls label: nth-of-type (5) { background: #ddd; } В оформленные кнопки навигации добавляем плавное окрашивание внутри них. Также добавляем условия, при которых активная кнопка и кнопка, на которую навели курсор, будет плавно окрашиваться. Наши собственные радио-кнопки готовы: image

6. Оживляем слайдер Ну, а теперь делаем так, чтобы слайды наконец-то переключались: .slides { height: inherit; opacity: 0; position: absolute; width: inherit; z-index: 0; -webkit-transform: scale (1.5); -moz-transform: scale (1.5); -o-transform: scale (1.5); transform: scale (1.5); -webkit-transition: transform ease-in-out .5s, opacity ease-in-out .5s; -moz-transition: transform ease-in-out .5s, opacity ease-in-out .5s; -o-transition: transform ease-in-out .5s, opacity ease-in-out .5s; transition: transform ease-in-out .5s, opacity ease-in-out .5s; }

#slide1: checked ~ .slider > .slide1, #slide2: checked ~ .slider > .slide2, #slide3: checked ~ .slider > .slide3, #slide4: checked ~ .slider > .slide4, #slide5: checked ~ .slider > .slide5 { opacity: 1; z-index: 1; -webkit-transform: scale (1); -moz-transform: scale (1); -o-transform: scale (1); transform: scale (1); } В общие стили слайдов мы добавляем свойства, при которых все слайды становятся невидимыми и уходят на задний план. Также мы добавили небольшое увеличение слайдов, пока они невидимы для придания интересного появления в слайдере.Далее мы приписываем условие, при котором, в зависимости от активной кнопки навигации, в окне слайдера появлялся необходимый слайд.

Результат можно посмотреть здесь: демка слайдера.

Итог Слайдер не требует js. Пускай он не умеет сам переключаться, но любому, кто знает основы CSS, transition и transform, будет легко придумать свои эффекты для переключения слайдов.P.S. За основу взят слайдер от «Sorax», который я переделал на свой лад.

© Habrahabr.ru