2017
8
Фев

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

grigoriev
4542
слайдер css
download_css_slider
DOWNLOAD
demo_css_slider
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]-->
        

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

Поделиться:

Комментарии

proshka55

proshka55

11.03.2017 19:15 Ответить

Все работает, только слайдер развалился ... первая картинка в заданных границах, а следующие почему-то где им захочется... то сверху пикселей на 80 то снизу пикселей на 500... ????? что бы это могло быть?

Алексей Григорьев

Алексей Григорьев

11.03.2017 19:39 Ответить

Проверьте что бы у обёртки вашего слайдера (блок где находятся все картинки ) было задано css свойство position: relative; у первой блока с картинкой слайдера position: relative; у других блоков картинок position: absolute; и top: 5px; left: 5px; right: 5px; или ваши размеры. Проблема скорее всего где то здесь. Если есть возможность скиньте ссылку на ваш слайдер.

proshka55

proshka55

11.03.2017 19:48 Ответить

Спасибо Алексей! ПОМОГЛО....)))) немного третий слайд вылазит за границу снизу, но это наверное фото чуть больше по размеру... поправлю позже...
Ваш слайдер хочу поставить на замену пресловутому Revolution... он долго грузится и Гугл ругается...
Хочу немного поработать над текстами в слайдах... Можно ли применить WOW.js?... надо как-то оживить подачу текста...

proshka55

proshka55

11.03.2017 19:56 Ответить

И еще вопрос... Не нравятся паддинги на 2 и 3 ( у меня их три!) ! Нельзя из убрать ка-то? пробовал - развалилось...

Алексей Григорьев

Алексей Григорьев

11.03.2017 20:12 Ответить

На счёт wow js не знаю не пробовал. С начала текст у меня то же был анимированый. Плашка выезжала справа налево. Но были сбои при прокрутке слайдера. Силами css решить не получилось. Так же есть проблема при добавлении в текст слайдера ссылки. При стандартной html ссылке всё ок, но как только решил закрыть её от индексирования ajax появились проблемы при реализации клика по ней. Для более мощной анимации лучше использовать слайдер на js. Ну здесь я посоветовать много чего не смогу. По поводу падингов не совсем понял, но попробуйте поменять свойства top: 5px; left: 5px; right: 5px;

proshka55

proshka55

11.03.2017 20:32 Ответить

Насчет падингов... 2 и 3 слайды из-за паддингов немного сползли вниз вправо... сделал их по 0.0001 px - все отлично... слайды в границах!
Но вот что-то никак не могу избавиться от 4 и 5 слайда... всроде все почистил, а после 3 слайда пустота ... и я так понял слайдер показывает 4 и 5 слайды которых нет!!!

Вообще Ваш слайдер хорош!!! (не хочу с js так как у меня и так много скриптов на сайте...) У Меня стоит js/jquery.themepunch.revolution.min.js!

классный!!!!! Но тяжелый... когда сайт грузится, происходит медленная его подгрузка... и когда сайт уже загрузился - слайдер все еще грузится...

proshka55

proshka55

11.03.2017 20:32 Ответить

Оптимизируйте загрузку видимого контента
Для отображения верхней части страницы необходимы дополнительные сетевые запросы. Сократите объем HTML-кода в верхней части страницы, чтобы она быстрее открывалась в браузере.
Полученного HTML недостаточно для отображения верхней части страницы. Обычно так происходит, если после синтаксического анализа HTML-кода требуется загрузка дополнительных ресурсов. Передавайте в первую очередь видимую часть страницы – включите весь необходимый контент непосредственно в HTML-ответ.

После получения всех данных HTML с сервера удалось отобразить только 4 % от общего объема содержания из верхней части страницы (открыть скриншот показать оригинал).

proshka55

proshka55

11.03.2017 20:33 Ответить

Это так гугл ругается....

proshka55

proshka55

11.03.2017 20:47 Ответить

А.... понял!!! Надо время пересчитать?... чтоб не было пустого места???))) понятненько...) )))

Илья

Илья

04.04.2017 18:32 Ответить

Алексей, здравствуйте!
Объясните персонально)
в скаченном ZIP-е есть *.js, они имеют отношение к слайдеру?
И еще. В демонстрацию вставил ссылки. Работают только в первом цикле прокрутки слайдов и при переходе через кнопку, со второго цикла ссылки становятся неактивными. Есть против этого способы?

Алексей Григорьев

Алексей Григорьев

04.04.2017 19:28 Ответить

Здравствуйте Илья. В zip архив js файлы относятся к разметке страницы, на которой находится слайдер. Она сделана с применением бутстрап. Я вас расстрою. С внедрением ссылок в плашки с описанием
могут быть проблемы. Работа слайдер основана на css свойстве focus. К примеру при клике по второй кнопке кнопка попадает в фокус и показывается соответственно второй слайд. При клике по ссылке в описании слайда фокус с кнопки уходит и показывается первый слайд. С другими картинками происходит то же самое. Как это пофиксить ещё не придумал. Возможно стоит поменять css свойство на котором работает слайдер.

Илья

Илья

04.04.2017 21:19 Ответить

Алексей, а реализация слайдера с выезжающей плашкой у Вас осталась, сможете скинуть?

Алексей Григорьев

Алексей Григорьев

04.04.2017 22:08 Ответить

Для анимации плашек скачайте по этой ссылке http://aweb34.ru/images/download/animation.zip архив. Там файл animation.css. Вставьте из него код в файл slider.css, где нибудь перед медиазапросом. Если вы не меняли html разметку то должно работать. У меня пашет. Правда анимация плашек в слайдере работает не совсем корректно.

Илья

Илья

07.04.2017 21:17 Ответить

Алексей, спасибо! подставил, все работает в лучшем виде)

Добавить комментарий

Защитный код
Обновить

Нажимая кнопку «Отправить», я принимаю пользовательское соглашение и подтверждаю, что ознакомлен и согласен с политикой конфиденциальности этого сайта

Используя данный сайт, вы даете согласие на использование файлов cookie, помогающих мне сделать его удобнее для вас. Уведомление о cookie