Слайдер в готовом виде

Слайдер на чистом CSS — как сверстать

Всем привет!
Сегодня мы разберемся, как сверстать слайдер на чистом CSS, без использования JavaScript, без использования плагинов. Все сами своими руками. Заглянем под капот, разберемся в конструкции от и до. Посмотрим, какие свойства в CSS дают возможность нам сделать это.


Я покажу слайдер, который делается на основе использования свойства visibility. Такой слайдер действует по следующему принципу: все слайды помещаются в одно место, но каждый раз отображается только один из них, нужный нам. Все остальные же в этот момент просто невидимы (свойство visibility у них hidden).  Меняя видимость слайдов, мы переключаем слайдер с одного слайда на другой.
Есть и другие способы создания слайдера, но общий принцип работы механизма у них похож.
Вот, что должно у нас получиться.

Начало работы.

Подготавливаем html-документ для начала работы, подбираем картинки для слайдера, все размещаем по нужным папкам, создаем и подключаем документ стилей. Кроме того, в слайдере будут использоваться стрелки, у меня, к примеру, это иконки из font awesome, поэтому необходимо скачать его, и тоже поместить в наш проект. Теперь мы готовы начать. Здесь можно скачать исходники для начала работы.
Создаем в нашем документе контейнер для будущего слайдера.

<div class="slider-container"></div>

В CSS задаем размеры слайдера, выравниваем его на странице, и указываем position relative для того, чтобы потом задать абсолютное позиционирование для самих слайдов внутри контейнера.

.slider-container {
 position: relative;
 margin: 20px auto 0;
 width: 40%;
 height: 0;
 padding-bottom: 40%;
 border: 10px solid #F08080;
}

Помещаем в контейнер все наши картинки, обернутые в div-блоки с присвоенным каждому блоку id.

<div class="slider-container">
  <div id="first" class="slides"><img src="img/1.jpg" alt="" /></div>
  <div id="second" class="slides"><img src="img/2.jpg" alt="" /></div>
  <div id="third" class="slides"><img src="img/3.jpg" alt="" /></div>
</div>

Задаем у слайдеров высоту и ширину в 100% от нашего контейнера, абсолютное позиционирование, чтобы они оказались все на одном месте, и visibility: hidden. То есть изначально все слайды спрятаны.

.slides {
  position: absolute;
  width: 100%;
  height: 100%;
  visibility: hidden;
}
.slides img {
 width: 100%;
 height: 100%;
}

Создаем механизм

Теперь пришло время для создания основного механизма нашего слайдера, с помощью чего мы вообще будем слайды переключать. Работать все будет на основе флажков (input типа radio). Указываем эти флажки по количеству наших слайдов, каждому прописываем свой id, и на одном из слайдов, тому который должен будет показываться по умолчанию при загрузке задаем значение checked (обычно это самый первый слайд). Переключением значения checked и будут переключаться наши слайды.

<input id="img_1" class="slide_img" checked="checked" name="slide_img" type="radio" />
<input id="img_2" class="slide_img" name="slide_img" type="radio" />
<input id="img_3" class="slide_img" name="slide_img" type="radio" />

Сам этот механизм должен быть убран «под капот», поэтому мы скрываем его с помощью CSS.

.slide_img {
  display: none;
}

Теперь нам нужно подготовить переключатели стрелочками для перелистывания слайдов вперед и назад. Делать мы их будем с помощью меток для нашего переключателя-радио. Создаем две группы меток — одна для перелистывания вперед, другая для перелистывания назад. В каждой группе по метке на каждый слайдер (на каждый наш инпут). У каждой метки обязательно указываем атрибут for для того, чтобы обозначить связь между этой меткой и флажком radio, к которому она относится. В этом атрибуте указывается id соответствующего инпута. В метки я вставила иконки font awesome для отображения стрелок.

<div id="arrow_next">
  <label for="img_1"><i class="fa fa-angle-right" aria-hidden="true"></i></label>
  <label for="img_2"><i class="fa fa-angle-right" aria-hidden="true"></i></label>
  <label for="img_3"><i class="fa fa-angle-right" aria-hidden="true"></i></label>
</div>
<div id="arrow_prev">
  <label for="img_1"><i class="fa fa-angle-left" aria-hidden="true"></i></label>
  <label for="img_2"><i class="fa fa-angle-left" aria-hidden="true"></i></label>
  <label for="img_3"><i class="fa fa-angle-left" aria-hidden="true"></i></label>
</div>

Задаем им цвет, размер, позиционируем абсолютно, размещаем в нужном нам месте с помощью свойств top, left, right, и для начала их тоже прячем.

#arrow_next label, #arrow_prev label {
  color: rgba(0, 0, 0, .7);
  position: absolute;
  visibility: hidden;
  cursor: pointer;
  top: 45%;
  font-size: 80px;
}
#arrow_prev label {
  left: -50px;
}
#arrow_next label {
  right: -50px;
}

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

<div class="switchers">
  <label id="switcher1" class="switcher" for="img_1"></label>
  <label id="switcher2" class="switcher" for="img_2"></label>
  <label id="switcher3" class="switcher" for="img_3"></label>
</div>

Задаем позиционирование, высоту и ширину контейнера для этих меток, и оформляем сами эти метки в виде кружков нужного нам размера, радиуса и цвета.

.switchers {
  position: absolute;
  width: 100%;
  height: 30px;
  bottom: 0;
  text-align: center;
}
.switcher {
  background: rgba(0, 0, 0, .7);
  width: 15px;
  height: 15px;
  position: relative;
  top: 7px;
  margin: 0 4px;
  display: inline-block;
  border-radius: 50%;
  cursor: pointer;
}

Заставляем механизм работать.

Теперь пришло время сделать так, чтобы наш слайдер заработал. В первую очередь будет использоваться псевдокласс checked в CSS. Этот псевдокласс обозначает применение какого-либо свойства только если у переключателя есть атрибут checked (то есть если он выбран).

#img_1:checked ~ #first

Эта запись означает применение стилевых свойств к элементу с id first (первый наш слайд) в том случае, если у элемента с id img_1 (первый наш флажок) есть атрибут checked. Вообще, знак ~ обозначает родственные отношения между селекторами, т.е. те селекторы, которые являются близлежащими и имеют общего родителя. Таким образом, если у нас будет выбран первый флажок, то мы показываем первый наш слайд (меняем у него visibility с hidden на visible). Все остальные, напоминаю, в это время невидимы. По аналогии, если мы выбираем второй флажок, то должен показываться второй слайд, а когда выбираем третий флажок, то показывается третий слайд.

#img_1:checked ~ #first,
#img_2:checked ~ #second,
#img_3:checked ~ #third
{
  visibility: visible;
}

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

#img_1:checked ~ div #switcher1,
#img_2:checked ~ div #switcher2,
#img_3:checked ~ div #switcher3
{
  background: #F08080;
}

Будем закрашивать нужный индикатор (то есть изменять нужную метку), когда будет выбран соответствующий ему флажок.
Наконец, давайте заставим работать стрелочки. И опять мы будем делать это с помощью нашего сегодняшнего помощника, псевдокласса checked. Нам опять необходимо, чтобы для каждого слайда у нас показывалась одна стрелка вперед, и одна назад (а всего у нас их, напоминаю, три вперед, и три назад, только изначально они все спрятаны).

#img_1:checked ~ #arrow_next label:nth-child(2)

Эта запись означает, что когда выбран первый флажок, показывается вторая по счету (псевдокласс nth-child с указанием элемента по счету) метка с иконкой «вперед». То есть та, при нажатии на которую будет у нас показываться второй слайд. То, что нужно! Соответственно, при показе второго слайда будет показываться стрелка, ведущая на третий слайд, а при показе третьего — стрелка, ведущая на первый.

#img_1:checked ~ #arrow_next label:nth-child(2),
#img_2:checked ~ #arrow_next label:nth-child(3),
#img_3:checked ~ #arrow_next label:nth-child(1)
{
  visibility: visible;
}

Тоже самое делаем и для стрелки «назад», только там метки указываем в обратном порядке.

#img_1:checked ~ #arrow_prev label:nth-child(3),
#img_2:checked ~ #arrow_prev label:nth-child(1),
#img_3:checked ~ #arrow_prev label:nth-child(2)
{
  visibility: visible;
}

Теперь слайдер готов и полностью функционирует.

Добавляем немного плавности

Можно ему еще добавить немного плавности при переключении картинок. Для этого мы наравне с visibility hidden делаем слайд еще и полностью прозрачным через свойство opacity. А при «включении» слайда прозрачность будет отключаться в течение полусекунды, и возникнет эффект плавности переключения.
Добавляем в .slides opacity: 0 и transition: .5s

.slides {
  position: absolute;
  width: 100%;
  height: 100%;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: .5s;
  -moz-transition: .5s;
  -o-transition: .5s;
  transition: .5s;
}

Подробно сейчас на свойстве transition останавливаться не буду, это отдельная большая тема. Если пока не знаете о нем, вставьте, как у меня.

#img_1:checked ~ #first,
#img_2:checked ~ #second,
#img_3:checked ~ #third
{
  visibility: visible;
  opacity: 1;
}

Все! Наш слайдер на чистом CSS готов!
При желании, можете скачать код готового слайдера.


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