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

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

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

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

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

◀

▶

Код HTML прост:

<div id='button-example'>
    <div></div>
    <div></div>
</div>

А вот 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 {
        content: '▶';
        right: 55%;
    }

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

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

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

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

---

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

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

<div class='sliderB'>
    <input type="radio" name="slider1" id="slider1_1" checked="checked">
    <div>
        <p>Восход над островом</p>
        <img src='https://lh3.googleusercontent.com/-XGgw41OSARk/VePicTdAdgI/AAAAAAAAAS4/WeBbxp4ebQg/s400-Ic42/00099_manaisland_1920x1200.jpg' alt=''>
    </div>
    <label for="slider1_4"></label>
    <label for="slider1_2"></label>

    <input type="radio" name="slider1" id="slider1_2">
    <div>
        <p>Озёрный край</p>
        <img src='https://lh3.googleusercontent.com/-aafAKIoTkT4/VePihWk2BHI/AAAAAAAAATA/zQVtiYD_eDc/s400-Ic42/00201_lakejipe_1920x1200.jpg' alt=''>
    </div>
    <label for="slider1_1"></label>
    <label for="slider1_3"></label>

    <input type="radio" name="slider1" id="slider1_3">
    <div>
        <p>Закатная синева</p>
        <img src='https://lh3.googleusercontent.com/-ikbDMRhLc_I/VePkT4XLFtI/AAAAAAAAATg/qaHqQk89RAw/s400-Ic42/00744_laclahachesunset_1920x1200.jpg' alt=''>
    </div>
    <label for="slider1_2"></label>
    <label for="slider1_4"></label>

    <input type="radio" name="slider1" id="slider1_4">
    <div>
        <p>Сельский пейзаж</p>
        <img src='https://lh3.googleusercontent.com/-BLXeHJNyOqw/VePimp_e_wI/AAAAAAAAATQ/BVw_9LFehyU/s400-Ic42/00442_pyrenees_1920x1200.jpg' alt=''>
    </div>
    <label for="slider1_3"></label>
    <label for="slider1_1"></label>

</div>

Из таблиц стилей от предыдущего слайдера мы удаляем всё, что связано со старыми кнопками и добавляем оформление кнопок из рассмотренного выше примера:

    .sliderB {
        width: 400px;
        height: 250px;
        border: 1px solid #888;
        position: relative;
        overflow: hidden;
    }

    .sliderB > input {
        display: none;
    }

    .sliderB > label {
        display: none;
    }

    .sliderB > input:checked + div + label,
    .sliderB > input:checked + div + label + label {
        display: block;
        width: 80px;
        height: 80px;
        border-radius: 40px;
        background-color: rgba(150, 150, 250, 0.7);

        cursor: pointer;

        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 100;
    }

    .sliderB > input:checked + div + label:after,
    .sliderB > input:checked + div + label + label:after {
        font-size: 30px;
        color: #fff;
        display: block;
        position: absolute;
        top: 0px;
        bottom: 0px;
        line-height: 80px;
    }

    .sliderB > input:checked + div + label {
        left: -40px;
    }

    .sliderB > input:checked + div + label:after {
        content: '◀';
        left: 55%;
    }

    .sliderB > input:checked + div + label + label {
        right: -40px;
    }

    .sliderB > input:checked + div + label + label:after {
        content: '▶';
        right: 55%;
    }

    .sliderB > div {
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        z-index: 0;
    }

    .sliderB > div {
        visibility: hidden;
        opacity: 0;
        transition: opacity 0.8s ease-out 0.1s, visibility 0.1s ease-out 0.9s;
    }

    .sliderB > input:checked + div {
        visibility: visible;
        opacity: 1;
        transition: opacity 0.8s ease-out 0.1s, visibility 0.1s ease-out 0s;
    }

    .sliderB > div > p {
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        text-align: center;
        color: #fff;
        text-shadow: 1px 1px 2px #000;
    }

В результате получается вот такой слайдер:

Восход над островом

◀

▶

Озёрный край

◀

▶

Закатная синева

◀

▶

Сельский пейзаж

◀

▶