Резиновая карусель на CSS

Карусели, несмотря на всю свою ущербность, продолжают отсаватся очень востребованным компонентом на тысячах сайтов. Чаще всего для из создания используется Javascript. В этой статье я попробую описать технику создания отзывчивой (резиновой, responsive) карусели на чистом CSS.

Для начала ДЕМО.

А теперь давайте разберемся как это работает. Для начала создадим структуру будущей карусели.

HTML:

<div class="carousel-wrapper">
    <input type="radio" checked="checked" id="slide1" class="carousel-selector" name="carousel-selector" />
    <input type="radio" id="slide2" class="carousel-selector" name="carousel-selector" />
    <input type="radio" id="slide3" class="carousel-selector" name="carousel-selector" />

    <ul class="carousel-items">
        <li class="carousel-item carousel-item-blue">
            Текст 1
        </li>

        <li class="carousel-item carousel-item-red">
            Текст 2
        </li>

        <li class="carousel-item carousel-item-green">
            Текст 3
        </li>
    </ul>

    <ul class="carousel-labels">
        <li class="carousel-label">
            <label for="slide1"></label>
        </li>
        <li class="carousel-label">
            <label for="slide2"></label>
        </li>
        <li class="carousel-label">
            <label for="slide3"></label>
        </li>
    </ul>
</div>

CSS:

.carousel-wrapper {
    width: 100%;
    position: relative;
    padding-bottom: 30%;
    background-color: #eee;
    overflow: hidden;
}

Параметр padding-bottom: 30%; задает высоту нашей карусели, в данном случае 30 процентов от ширины.

Радио-баттаны в этом примере предназначены для переключения элементов карусели. Они должны быть невидимыми.

HTML:

<input type="radio" checked="checked" id="slide1" class="carousel-selector" name="carousel-selector" />
<input type="radio" id="slide2" class="carousel-selector" name="carousel-selector" />
<input type="radio" id="slide3" class="carousel-selector" name="carousel-selector" />

CSS:

.carousel-selector {
    display: none;
}

Сами элементы карусели находятся в списке carousel-items. В этом примере я сделал их всего три, от этого зависят и их параметры. Классы carousel-item-blue, carousel-item-red и carousel-item-green необходимы лишь для стилизации каждого элемента и обязательными не являются. Так же присутствуют анимации, чтобы переключение между элементами выглядело красиво.

HTML:

<ul class="carousel-items">
    <li class="carousel-item carousel-item-blue">
        Текст 1
    </li>

    <li class="carousel-item carousel-item-red">
        Текст 2
    </li>

    <li class="carousel-item carousel-item-green">
        Текст 3
    </li>
</ul>

CSS:

.carousel-items {
    margin: 0;
    padding: 0;
    list-style: none;
    display: block;
    width: 300%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    transition: left .5s ease-out;
    -o-transition: left .5s ease-out;
    -ms-transition: left .5s ease-out;
    -moz-transition: left .5s ease-out;
    -webkit-transition: left .5s ease-out;
}
.carousel-item {
    width: 33.33333333%;
    height: 100%;
    color: white;
}
.carousel-item-blue {
    background-color: blue;
}
.carousel-item-red {
    background-color: red;
}
.carousel-item-green {
    background-color: green;
}

В самом конце располагаем наши кнопки переключения слайдов.

HTML:

<ul class="carousel-labels">
    <li class="carousel-label">
        <label for="slide1"></label>
    </li>
    <li class="carousel-label">
        <label for="slide2"></label>
    </li>
    <li class="carousel-label">
        <label for="slide3"></label>
    </li>
</ul>

CSS:

.carousel-labels {
    margin: 0;
    padding: 0;
    list-style: none;
    display: block;
    position: absolute;
    z-index: 2;
    left: 0;
    bottom: 0;
    height: 20px;
    width: 100%;
    padding: 10px 0;
    text-align: center;
}
.carousel-selector {
    display: none;
}
.carousel-label {
    display: inline-block;
}
.carousel-label label {
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background-color: white;
    display: block;
    cursor: pointer;
}

А теперь подробнее про саму смену слайдов. С помощью CSS-селекторов мы задаем смену позиции для слайдов в зависимости от выбраного радио-баттана: #slide1:checked ~ .carousel-items. Так же в CSS меняем наши кнопки переключения.

CSS:

#slide1:checked ~ .carousel-items {
    left: 0;
}
#slide1:checked ~ .carousel-labels .carousel-label:nth-child(1) label {
    background-color: black;
}
#slide2:checked ~ .carousel-items {
    left: -100%;
}
#slide2:checked ~ .carousel-labels .carousel-label:nth-child(2) label {
    background-color: black;
}
#slide3:checked ~ .carousel-items {
    left: -200%;
}
#slide3:checked ~ .carousel-labels .carousel-label:nth-child(3) label {
    background-color: black;
}

Еще раз ДЕМО.

Данный пример написан лишь для того, чтобы показать, что многие «модные» вещи можно делать и без Javascript. Многое здесь можно улучшить, но как базис использовать вполне можно.