Делаем слайдер для сайта html css

DOWNLOAD

DEMO

В одном проекте мне понадобился адаптивный резиновый слайдер и я решил написать слайдер для сайта html css. Использовать javascript я не захотел, так как все поставленные мной задачи можно решить и на чистом css.

И так начинаем писать наш слайдер на css. Что же будет делать слайдер и какие технологии мы будем использовать. Всё будет работать на свойстве tabindex и использоваться css 3 свойство animation и @keyframes для автоматической прокрутки картинок. Слайдер в автоматическом режиме будет крутит картинки в браузерах с поддержкой css3 и давать возможность листать слайды кнопками в остальных. Он не будет работать в ИЕ 7-8 так как у них проблемы с tabindex. Для работы в ие нужен будет js скрипт. Так же наш слайдер для сайта будет резиновый, то-есть масштабируемый по размерам экрана. Для уменьшения количества текста в плашке в зависимости от разрешения экрана будут использоваться медиазапросы. Вот такие вот задачи нужно будет реализовать. Начнём с html кода. Листинг ниже.

                                     
 <div class="myslider">
    <div class="but1" tabindex="1"></div>
    <div class="but2" tabindex="1"></div>
    <div class="but3" tabindex="1"></div>
    <div class="but4" tabindex="1"></div>
    <div class="but5" tabindex="1"></div>
    <div class="round1 nav"></div>
    <div class="round2 nav"></div>
    <div class="round3 nav"></div>
    <div class="round4 nav"></div>
    <div class="round5 nav"></div>
    <div class="img1 tank " >
        <img src="/img/is4.png"/>
        <div class="discript1">
            <h3>Тяжёлый танк: ИС-4</h3>
            <p>
                <!-- какой то текст -->
            </p>
        </div>
    </div>
    <div class="img2 tank">
        <!--  код как в img1 -->
    </div>
    <div class="img3 tank">
        <!--  код как в img1 -->
    </div>
    <div class="img4 tank">
        <!--  код как в img1 -->
    </div>
    <div class="img5 tank">
        <!--  код как в img1 -->
    </div>
</div> <!--myslider -->

Мы имеем див .slider, он является обёрткой для всех наших картинок, групп кнопок, плашек с описанием и тд. Так же мы имеем группу кнопок .but1, .but2 и тд им мы назначим tabindex. Смена наших слайдов будет происходить в зависимости от того какая кнопка у нас в фокусе. Ещё один важный аспект html разметки кнопок заключается в том, что они в потоке документа должны быть выше тех дивов к которым будет применяться действие когда кнопка будет в фокусе. Это связанно с тем, что мы должны обращаться к этим дивам через селекторы ~ или +. Дивы .round1, round2 ... и тд своего рода подложка под кнопки .but1, .but2..., эти кнопки имеют прозрачный фон, а к их подложке мы прикручиваем анимацию кнопок при автоматической смене слайдов. Соответственно раз у нас 5 слайдов то и 5 кнопок и 5 подложек. Каждую нашу картинку мы оборачиваем в блок .img1, .img2.., туда же мы помещаем блок с описанием картинки. На этом описание html разметки закончим и перейдём к css.

Начнём пожалуй с слайдов. Спозиционируем их правильно и создадим для них анимацию.

    .img1{
        position: relative;/*для резины*/
        max-width: 100%;
        -webkit-transition-property:opacity, z-index;
        -webkit-transition-duration:2s;
        -moz-transition-property:opacity, z-index;
        -moz-transition-duration:2s;
        -o-transition-property:opacity, z-index;
        -o-transition-duration:2s;
        transition-property:opacity, z-index;
        transition-duration:2s;
        opacity: 1; /*не прозрачная только первая картинка*/
        z-index: 1;
    } 
    .img2, .img3, .img4, .img5{
        position: absolute;
        top: 5px;
        left: 5px;
        right: 5px;
        -webkit-transition-property:opacity, z-index;
        -webkit-transition-duration:2s;
        -moz-transition-property:opacity, z-index;
        -moz-transition-duration:2s;
        -o-transition-property:opacity, z-index;
        -o-transition-duration:2s;
        transition-property:opacity, z-index;
        transition-duration:2s;
        opacity: 0;/*все остальные прозрачные*/
    }
    img{
        max-width: 100%;/*картинка резиновая*/
        vertical-align: middle;
    }

Мы складываем наши слайды в стопку друг над другом, позиционируя их абсолютно. Исключение составляет только первый слайд .img1. Он позиционируется относительно, для того что бы наш слайдер был резиновым и масштабировался по высоте и ширине. Так же всем слайдам мы задаём нулевую прозрачность opacity: 0. Опять же исключение из правил составляет слайд .img1. Ему мы не задали прозрачность. Это нужно для того, что бы хотя бы один слайд был виден в браузерах не поддерживающих свойство css3 animation.

Анимируем слайдер на css

Теперь давайте поговорим об анимации. Мы будем, как мы раньше говорили, изменять состояние слайда когда кнопка .but1 или другие будут получать состояние фокус. Так вот у слайда будут меняться свойства прозрачности с 0 на 1 и z-index от 1 до 15 для того что бы слайд был поверх других. Происходить это будет плавно за 2 секунды. Про реализацию действия мы поговорим ниже.

Продолжая разбирать тему анимации давайте опишем автоматическую анимацию наших слайдов. До этого мы разбирались с реализацией анимации при клике по кнопке. Освежить память по свойствам анимации можно здесь.

            .img1{ 
            /*вся анимация для блоков img длится 30с*/ 
            /*и повторяется бесконечно*/
                   animation: imgAnim 30s linear infinite;
                   -webkit-animation: imgAnim 30s linear infinite;
                   -moz-animation: imgAnim 30s linear infinite;
                   -o-animation: imgAnim 30s linear infinite;
            }
            .img2{
            /*--задержка 6 сек----*/
                animation: imgAnim 30s linear 6s infinite;
                /*правила с браузерными префиксами*/
            }
            .img3{
             /*----12 сек-----*/
                animation: imgAnim 30s linear 12s infinite;
                /*правила с браузерными префиксами*/
            }
            .img4{
                animation: imgAnim 30s linear 18s infinite;
                /*правила с браузерными префиксами*/
            }
            .img5{
                animation: imgAnim 30s linear 24s infinite;
                /*правила с браузерными префиксами*/
            }
        

Описанная в листинге выше анимация бесконечна и запускается при загрузке страницы. Каждая картинка у нас будет показываться и исчезать за счёт изменения её прозрачности. Что бы это не было одновременно для всех создадим задержку в анимации для определённой картинки. Так как у нас общая анимация 30 сек картинок 5 30/5=6сек. Такая вот будет у нас задержка перед показом 2й картинки, 12 сек перед показом третьей и тд.

             @keyframes imgAnim {
                0% { opacity: 0; z-index: 5; }
                8% { opacity: 1; z-index: 5; }
                17% { opacity: 1; z-index: 5;}
                25% { opacity: 0; z-index: 5; }
                100% { opacity: 0; z-index: 5; }
            }
            @-webkit-keyframes imgAnim {
                /*------------------*/
            }
            @-o-keyframes imgAnim {
                /*------------------*/
            }
            @-moz-keyframes imgAnim {
               /*------------------*/
            }
        

В листинге выше описаны шаги анимации. Давайте разберёмся как мы их рассчитали. Шаги у нас задаются в % от всего времени анимации. Определим какое время показывается наша картинка. 5/30=0.1666 17% столько процентов от общего времени показывается один слайд. Чтобы картинка появлялась плавнее зададим её появление например (17/2=9) с 9%. Для ие 10 нужно задавать в анимации Z-индекс, если его не задать, то перемещение слайдов видно не будет так как они все будут закрываться первым слайдом. Теперь давайте напишем css код и для дивов с плашками описания.

             .discript1, .discript2, .discript3, .discript4, .discript5{
                position: absolute;
                width: 35%;
                background-color: rgba(0, 0, 0, 0.56);
                bottom: 15px;
                padding: 10px;
            }
            .tank h3{
                color: #fff;
                margin: 0;
                margin-bottom: 3px;
                font-family: Times New Roman;
            }
            .tank p{
                color: #fff;
                margin: 0;
                font-size: 14px;
                font-family: Times New Roman;
            }
        

Тут я думаю всё просто и комментарии не нужны. Для полноты картины нам осталось только реализовать паузы в анимации при наведении на слайдер. Сss код ниже.

            .slider:hover .tank{
                -moz-animation-play-state: paused;
                -webkit-animation-play-state: paused;
                -o-animation-play-state: paused;
                animation-play-state: paused;
            }    
        

Вот у нас уже начинает получаться задуманный нами слайдер. На данном этапе если мы сделали всё правильно, слайдер будет автоматически прокручивать картинки и становиться на паузу при наведении на слайд. Давайте теперь научимся управлять этим процессом вручную.

Подключение кнопок прокрутки в слайдер на css

Для управления мы в html коде описали кнопки и их подложку. Давайте напишем для них css стиль.

            .but1, .but2, .but3, .but4, .but5 {
                position: absolute;
                width: 14px;
                height: 14px;
                background: transparent;
                bottom: 25px;
                left: 50%;
                right: 10px;
                text-align: center;
                cursor: pointer;
                z-index: 1000;
                box-shadow: -1px -1px 1px 1px rgba(0,0,0, 0.5);
                -webkit-border-radius: 7px;
                -moz-border-radius: 7px;
                -ms-border-radius: 7px;
                -o-border-radius: 7px;
                border-radius: 7px;
                outline:none;
            }
            .but1{
                margin-left: -50px;
            }
            .but2{
                margin-left: -25px;
            }
            .but4{
                margin-left: 25px;
            }
            .but5{
                margin-left: 50px;
            }
            .round1, .round2, .round3, .round4, .round5{
                position: absolute;
                width: 14px;
                height: 14px;
                background:   #fff;
                bottom: 25px;
                left: 50%;
                right: 10px;
                text-align: center;
                cursor: pointer;
                z-index: 999;
                box-shadow: -1px -1px 1px 1px rgba(0,0,0, 0.5);
                -webkit-border-radius: 7px;
                -moz-border-radius: 7px;
                -ms-border-radius: 7px;
                -o-border-radius: 7px;
                border-radius: 7px;
                outline:none;
            }
            .round1{
                margin-left: -50px;
            }
            .round2{
                margin-left: -25px;
            }
            .round4{
                margin-left: 25px;
            }
            .round5{
                margin-left: 50px;
            }
        

Мы спозиционировали кнопки абсолютно, с помощью border-radius сделали их круглыми, прозрачными и задали z-index: 1000 что бы они были поверх всех элементов слайдера. Кнопки у нас прозрачные, и мы под ними расположили подложки (за счёт меньшего z-index), к которым мы применим анимацию, которая будет затемнять определённую кнопку для определённого слайда. Опишем теперь анимацию подложек.

            .round1{
                animation: butAnim 30s linear infinite;
                /*правила с браузерными префиксами*/
            }
            .round2{
                animation: butAnim 30s linear 6s infinite;
                /*правила с браузерными префиксами*/
            }
            .round3{
                animation: butAnim 30s linear 12s infinite;
               /*правила с браузерными префиксами*/
            }
            .round4{
                animation: butAnim 30s linear 18s infinite;
               /*правила с браузерными префиксами*/
            }
            .round5{
                animation: butAnim 30s linear 24s infinite;
                /*правила с браузерными префиксами*/
            }
            @keyframes butAnim {
                0% {background-color: #fff;}
                8% {background-color: #8699a4;}
                17% {background-color: #8699a4;}
                25% {background-color: #fff;}
                100% {background-color: #fff;}
            }
            @-webkit-keyframes butAnim {
               /*------------------*/
            }
            @-o-keyframes butAnim {
                 /*------------------*/
            }
            @-moz-keyframes butAnim {
                 /*------------------*/
            }
            /*пауза в анимации подложки при наведении на слайдер*/
            .slider:hover .nav{
                -moz-animation-play-state: paused;
                -webkit-animation-play-state: paused;
                -o-animation-play-state: paused;
                animation-play-state: paused;
            }
        

Эта автоматическая анимация устроена аналогично анимации слайдов, так что подробно описывать её смысла нет. На данном этапе мы имеем слайдер автоматически листающий картинки и плашки с описаниями, а так же мы имеем кнопки для листания картинок слайдера с анимацией затемнения кнопки для определённого слайда. Теперь нам нужно реализовать действия, которые мы хотим производить с слайдером.

Но перед решением вопроса реализации действия у нас возникает проблема с анимацией. Она заключается в том, что анимация css имеет приоритет перед всеми действиями, которые мы хотим назначить кнопкам. Следовательно анимацию перед исполнением действия при нажатии кнопки нужно отключить.

         /*Сбрасываем анимацию слайдов при нажатии кнопки*/
        .but1:focus ~ .tank, .but2:focus ~ .tank, .but3:focus ~ .tank, 
        .but4:focus ~ .tank, .but5:focus ~ .tank {
            -moz-animation: none;
            -webkit-animation: none;
            -o-animation: none;
            animation: none;
        }
        /*когда кнопка в фокусе сбрасывается анимация кругляшей*/
        .but1:focus ~ .nav, .but2:focus ~ .nav, .but3:focus ~ .nav, 
        .but4:focus ~ .nav, .but5:focus ~ .nav{
            -moz-animation: none;
            -webkit-animation: none;
            -o-animation: none;
            animation: none;
        }
        

Вот теперь можно заняться привязкой действия к кнопкам. Мы решили, что при нажатии на кнопку у нас должна показываться определённая картинка. Так же выбранная кнопка должна затемняться.

            /*действие меняющее слайд*/
            .but1:focus ~ .img1, .but2:focus ~ .img2, .but3:focus ~ .img3, .but4:focus ~ .img4, .but5:focus ~ .img5 {
                opacity: 1;
                z-index: 15;
            }
             /*делаем кнопку в фокусе серой. */
            .but1:focus, .but2:focus, .but3:focus, .but4:focus, .but5:focus{
                background-color:  #8699a4;
            }
        

Как я писал выше действие нашего слайдера основано на свойстве tabindex. Подробнее о реализации клика в css можно почитать здесь. С помощью этого свойства мы задаём нашим кнопкам событие фокус, на которое можем повесить действие. Наше действие заключается в том, что мы прозрачный слайд делаем не прозрачным и помещаем его с помощью z-index выше первого слайда .img1. После ухода фокуса с кнопки всё возвращается назад, все анимации запускаются заново.

Так как у нас слайдер резиновый то нам нужно уменьшать плашку с описанием в зависимости от величины слайдера. Используем для этого медиазапросы Если разрешение экрана будет меньше 740px мы из плашки будем убирать текст с описанием и оставим только уменьшенный заголовок и ссылку.

         @media only screen and (max-width:740px) {
             .tank p{
                 display: none;
              }
              .tank h3{
                 font-size: 14px;
                 text-align: center;
              }
         }
        

Как я раньше говорил, наш слайдер не работает в ИЕ 7-8. Для этих браузеров уберём вывод кнопок и плашек с описанием. Пусть у нас будет выводиться в этих браузерах только картинка.

        <!--[if lt IE 9]>
           <style type="text/css">
            .but1, .but2, .but3, .but4, .but5, .round1, .round2,
            .round3, .round4, .round5, .discript1, .discript2, 
            .discript3, .discript4, .discript5{
                display: none;
            }
           </style> 
        <![endif]-->
        

На этом свой урок я заканчиваю. Я думаю тема о том как написать слайдер полностью раскрыта.