Мой Справочник | CSS3 | Слайдер с прокруткой

Арт-галерея

HTML:

<!--ОСНОВНОЙ КОНТЕЙНЕР-->
<section class="slider-count">
    <!--ЗАГОЛОВОК СЛАЙДЕРА-->
    <h1>Арт-галерея</h1>
    <!--КОНТЕЙНЕР СЛАЙДЕРА-->
    <div class="slider">
        <!--ИНПУТЫ-->
        <input type="radio" id="btn-1" name="toggle" checked>
        <input type="radio" id="btn-2" name="toggle">
        <input type="radio" id="btn-3" name="toggle">
        <!--БЛОК УПРАВЛЕНИЯ-->
        <div class="slider-controls">
            <!--ЛЕЙБЛЫ-->
            <label for="btn-1"></label>
            <label for="btn-2"></label>
            <label for="btn-3"></label>
        </div>
        <!--КОНТЕЙНЕР ДЛЯ СЛАЙДОВ-->
        <div class="slider-inner">
            <!--КОНТЕЙНЕР ЛЕНТЫ СЛАЙДОВ-->
            <div class="slider-slides">
                <!--СЛАЙДЫ-->
                <img src="../pict/slider-1.png">
                <img src="../pict/slider-2.png">
                <img src="../pict/slider-3.png">
            </div>
        </div>

    </div>

</section>

CSS:

/*Задаём ширину КОНТЕЙНЕРУ, центруем, стилизуем*/
.slider-count {
    width: 450px;
    margin: 40px auto;
    background: white;
    box-shadow: 0 0 3px #ccc;
    color: #333;
    font-family: 'Open Sans', sans-serif;
    background: #f5f5f5;
    margin-bottom: 60px;
}
/*Стилизуем ЗАГОЛОВОК*/
.slider-count h1 {
    padding: 10px 0;
    margin: 0;
    font-size: 28px;
    font-weight: normal;
    text-align: center;
}
/*Задаём КОНТЕЙНЕРУ СЛАЙДЕРА отн. 
позиционирование*/
.slider {
    position: relative;
}
/*Скрываем сисемные РАДИО-кнопки*/
.slider input[type=radio] {
    display: none;
}
/*Скрываем переполнение КОНТЕЙНЕРА СЛАЙДОВ*/
.slider-inner {
    overflow: hidden;
}
/*Задаём ширину КОНТЕЙНЕРУ ЛЕНТЫ СЛАЙДОВ равную
ширине ленты слайдов и задаём плавный переход */
.slider-slides {
    width: 300%;
    transition: transform .8s ease;
}
/*Флотим СЛАЙДЫ в одну ленту и задаём размеры*/
.slider-slides img {
    float: left;
    width: 450px;
    height: 320px;
}
/*Позиционируем БЛОК УПРАВЛЕНИЯ куда нужно*/
.slider-controls {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: -40px;
    z-index: 100;
    text-align: center;
}
/*Стилизуем ЛЕЙБЛЫ, делаем плавный переход*/
.slider-controls label {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 3px;
    background: #ccc;
    cursor: pointer;
    border: 4px solid white;
    border-radius: 50%;
    box-shadow: 0px 0px 2px rgba(0,0,0,.8);
    transition: background-color .2s;
}
/*Активное состояние ЛЕЙБЛОВ*/
#btn-1:checked ~ .slider-controls label[for="btn-1"],
#btn-2:checked ~ .slider-controls label[for="btn-2"],
#btn-3:checked ~ .slider-controls label[for="btn-3"] {
    background-color: #666;
}
/*Связываем 1-й слайд с ЛЕЙБЛОМ 
и делаем трансормацию*/
#btn-1:checked ~ .slider-inner .slider-slides {
    transform: translate(0);
}
/*Связываем 2-й слайд с ЛЕЙБЛОМ 
и делаем трансормацию*/
#btn-2:checked ~ .slider-inner .slider-slides {
    transform: translate(-450px);
}
/*Связываем 3-й слайд с ЛЕЙБЛОМ 
и делаем трансормацию*/
#btn-3:checked ~ .slider-inner .slider-slides {
    transform: translate(-900px);
}