Кнопки вперед назад css

[вёрстка] Как сделать слайдер на CSS и HTML. Часть 2.

В предыдущей статье мы рассмотрели, как сверстать простой слайдер при помощи CSS без использования JS-скриптов. Сейчас разберём еще один вариант оформления слайдера — с кнопками «вперёд» и «назад».

Простой слайдер на CSS с кнопками «вперёд» и «назад»

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

Кнопки «вперёд» и «назад» мы можем нарисовать в графическом редакторе любые, какие нам нужно. Но для верстальщика зачастую гораздо проще создать несложные элементы оформления при помощи CSS, чем рисовать вручную. Поэтому сверстаем вот такие кнопки:

А вот CSS может слегка взорвать мозг:

#button-example < width: 400px; height: 250px; border: 1px solid #888; position: relative; overflow: hidden; >#button-example > div < width: 80px; height: 80px; border-radius: 40px; background-color: rgba(150, 150, 250, 0.7); position: absolute; top: 50%; transform: translateY(-50%); >#button-example > div:after < font-size: 30px; color: #fff; display: block; position: absolute; top: 0px; bottom: 0px; line-height: 80px; >#button-example > div:first-child < left: -40px; >#button-example > div:first-child:after < content: '◀'; left: 55%; >#button-example > div:last-child < right: -40px; >#button-example > div:last-child:after

Разберёмся, что здесь происходит. Мы задаём для кнопки квадратный блок (ширина и высота 80 пикселей) и при помощи свойства border-radius превращаем его в круг. Позиционируем его абсолютно таким образом, чтобы половина блока ушла за границу контейнера. Благодаря свойству overflow: hidden контейнера, всё, что вышло за его границы, обрезается. Таким образом мы получаем два полукруга.

Чтобы отцентрировать кнопки по высоте, используем следующий приём. Выставляем кнопке top: 50%. Таким образом, верхняя граница кнопки будет находиться посередине контейнера. Также указываем трансформацию — сдвиг по высоте на 50%: transform: translateY(-50%). Проценты, указанные в трансформации, отсчитываются не от размера родительского элемента (контейнера), а от размера самого блока. Таким образом, блок смещается на половину своей высот вверх. В результате центр блока оказывается по высоте совмещен с центром контейнера.

Далее внутри кнопок надо нарисовать стрелку влево и стрелку вправо. Используем для этого псевдоэлементы :after, и стрелки рисуем в виде соответствующих символов Unicode.

Отцентрировать стрелку по высоте, используем еще один приём вертикального выравнивания: задаем высоту строки равной высоте контейнера (line-height: 80px).

Разобрались с тем, как отобразить кнопки. Теперь модифицируем код слайдера из предыдущей статьи для использования с такими кнопками.

Отдельные пары кнопок нам понадобятся для каждого кадра слайдера. В первом кадре кнопка «Назад» активирует последний кадр, а кнопка «Вперёд» — второй кадр. Во втором кадре кнопка «Назад» активирует первый кадр, а кнопка «Вперёд» — третий кадр. И так далее. Получается код следующего вида:

 
 
Восход над островом
 
 
Озёрный край
 
 
Закатная синева