Пример слайдера на чистом CSS3

Честно стырено с habr.

1. Верстаем основу

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

<div class="wrapper">
 <input type="radio" name="point" id="slide1" checked>
 <input type="radio" name="point" id="slide2">
 <input type="radio" name="point" id="slide3">
 <input type="radio" name="point" id="slide4">
 <input type="radio" name="point" id="slide5">
 <div class="slider">
  <div class="slides slide1"></div>
  <div class="slides slide2"></div>
  <div class="slides slide3"></div>
  <div class="slides slide4"></div>
  <div class="slides slide5"></div>
 </div> 
 <div class="controls">
  <label for="slide1"></label>
  <label for="slide2"></label>
  <label for="slide3"></label>
  <label for="slide4"></label>
  <label for="slide5"></label>
 </div>
</div>

Здесь мы видим, что общий блок «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: 350px;
 margin: 100px auto 0;
 position: relative;
 width: 700px;
}

.slider {
 background-color: #ddd;
 height: inherit;
 overflow: hidden;
 position: relative;
 width: inherit;
 -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .5);
 -moz-box-shadow: 0 0 20px rgba(0, 0, 0, .5);
 -o-box-shadow: 0 0 20px rgba(0, 0, 0, .5);
 box-shadow: 0 0 20px rgba(0, 0, 0, .5);
}

Общий блок и блок с слайдером имеют одинаковые размеры, чтобы идеально контролировать положение слайдера на странице. Пока отсутствуют слайды, слайдер мы временно покрасили в светло-серый цвет.

.wrapper > input {
 display: none;
}

Радио-кнопки скрываем. Они нам понадобятся позже.

Результат на данный момент такой:

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); }

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

4. Делаем навигацию по слайдам

Так как радио-кнопки скрыты и нужны нам как переключатели, оформляем подготовленные лейблы:

.wrapper .controls {
 left: 50%;
 margin-left: -98px;
 position: absolute;
}

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

.wrapper label:after {
 border: 2px solid #ddd;
 content: " ";
 display: block;
 height: 12px;
 left: -4px;
 position: absolute;
 top: -4px;
 width: 12px;
 -webkit-border-radius: 50%;
 -moz-border-radius: 50%;
 -o-border-radius: 50%;
 border-radius: 50%;
}

Навигацию мы делаем классической. Каждая кнопка представляет собой область в виде круга, внутри которого при активном слайде пустая область частично окрасится. Пока же у нас следующий результат:

5. Учим кнопки нажиматься

Пришло время научить слайдер переключать слайды по нажатию на определённую кнопку:

.wrapper label {
 cursor: pointer;
 display: inline-block;
 height: 8px;
 margin: 25px 12px 0 16px;
 position: relative;
 width: 8px;
 -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;
}

В оформленные кнопки навигации добавляем плавное окрашивание внутри них. Также добавляем условия, при которых активная кнопка и кнопка, на которую навели курсор, будет плавно окрашиваться. Наши собственные радио-кнопки готовы:

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», который я переделал на свой лад.