Слайдер на CSS3

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

demosourse

 

Разметка HTML

Разметка HTML очень простая. В примере имеется четыре слайда. Каждый из них состоит из изображения (как фон) и текста описания в элементе div. Дополнительные слайды вставить очень просто.

        <div class="slides">
            <ul> <!-- Слайды -->
                <li><img src="images/pic1.jpg" alt="image01" />
                    <div>Описание #1</div>
                </li>
                <li><img src="images/pic2.jpg" alt="image02" />
                    <div>Описание #2</div>
                </li>
                <li><img src="images/pic3.jpg" alt="image03" />
                    <div>Описание #3</div>
                </li>
                <li><img src="images/pic4.jpg" alt="image04" />
                    <div>Описание #4</div>
                </li>
            </ul>
        </div>

 

CSS

Для слайдера используются анимации CSS3 anim_slides и anim_titles. Первая применяется для отдельных слайдов, вторая - для текста описания. Для описания также изменяется положение и прозрачность.

/* Слайдер */
.slides {
    height:300px;
    margin:50px auto;
    overflow:hidden;
    position:relative;
    width:900px;
}
.slides ul {
    list-style:none;
    position:relative;
}

/* Кадры анимации #anim_slides */
@-webkit-keyframes anim_slides {
    0% {
        opacity:0;
    }
    6% {
        opacity:1;
    }
    24% {
        opacity:1;
    }
    30% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}
@-moz-keyframes anim_slides {
    0% {
        opacity:0;
    }
    6% {
        opacity:1;
    }
    24% {
        opacity:1;
    }
    30% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}

.slides ul li {
    opacity:0;
    position:absolute;
    top:0;

    /* анимация css3 */
    -webkit-animation-name: anim_slides;
    -webkit-animation-duration: 24.0s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;

    -moz-animation-name: anim_slides;
    -moz-animation-duration: 24.0s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
}

/* Задержки css3 */
.slides ul  li:nth-child(2), .slides ul  li:nth-child(2) div {
    -webkit-animation-delay: 6.0s;
    -moz-animation-delay: 6.0s;
}
.slides ul  li:nth-child(3), .slides ul  li:nth-child(3) div {
    -webkit-animation-delay: 12.0s;
    -moz-animation-delay: 12.0s;
}
.slides ul  li:nth-child(4), .slides ul  li:nth-child(4) div {
    -webkit-animation-delay: 18.0s;
    -moz-animation-delay: 18.0s;
}
.slides ul li img {
    display:block;
}

/* Кадры анимации #anim_titles */
@-webkit-keyframes anim_titles {
    0% {
        left:100%;
        opacity:0;
    }
    5% {
        left:10%;
        opacity:1;
    }
    20% {
        left:10%;
        opacity:1;
    }
    25% {
        left:100%;
        opacity:0;
    }
    100% {
        left:100%;
        opacity:0;
    }
}
@-moz-keyframes anim_titles {
    0% {
        left:100%;
        opacity:0;
    }
    5% {
        left:10%;
        opacity:1;
    }
    20% {
        left:10%;
        opacity:1;
    }
    25% {
        left:100%;
        opacity:0;
    }
    100% {
        left:100%;
        opacity:0;
    }
}

.slides ul li div {
    background-color:#000000;
    border-radius:10px 10px 10px 10px;
    box-shadow:0 0 5px #FFFFFF inset;
    color:#FFFFFF;
    font-size:26px;
    left:10%;
    margin:0 auto;
    padding:20px;
    position:absolute;
    top:50%;
    width:200px;

    /* Анимация css3 */
    -webkit-animation-name: anim_titles;
    -webkit-animation-duration: 24.0s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;

    -moz-animation-name: anim_titles;
    -moz-animation-duration: 24.0s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
}

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.script-tutorials.com/css3-fade-slider/
Перевел: Сергей Фастунов
Урок создан: 20 Июня 2012
Просмотров: 136616
Правила перепечатки


5 последних уроков рубрики "CSS"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 20 Июня 2012 14:36
    izmenaz
    а можно сделать так чтобы описание не приезжало, а уже было слева или справа?
  • 20 Июня 2012 15:07
    black_hound
    давайте уже возьмём в привычку выставлять версии браузеров, в которых "фича" работает. к чему тратить время самому на проверку даже если это не сложный урок
    • 20 Июня 2012 15:47
      romgerman
      Ага. А то в Опере не работает.
    • 21 Июня 2012 10:43
      RebelioUS
      +1 Это + как минимум к моему личному рейтингу сайтов.
  • 20 Июня 2012 15:51
    lubko
    А лучше постить только то што ie7+ и так далее... толку всьоравно нету.
  • 21 Июня 2012 10:51
    a_vitalka
    Шикарный слайдер, но на ИЕ7 не работает (
    • 22 Июня 2012 09:29
      derision
      :) Больше похоже на недоработанную самоделку.
    • 26 Июня 2012 20:25
      aleksejs.jevsejevs
      да он и на IE9 не работает даже
  • 21 Июня 2012 11:07
    saynez
    Не работает в седьмом ослике, пойду застрелюсь.
  • 21 Июня 2012 11:18
    viktor.lavrenko
    Классно, я себе такую штуку поставлю когда во всех браузерах будет работать. Это лет так через 50 наверное.
  • 21 Июня 2012 12:22
    Hrabr
    Опера его ВООБЩЕ не видит. Для кого это все создается если использовать нельзя?
  • 21 Июня 2012 14:37
    Карен
    Классный слайдер!
  • 21 Июня 2012 15:13
    Евгений Кондрашов
    Опера 12 - нуль реакции 0_о
  • 21 Июня 2012 15:16
    anton950712
    в IE не работает(
  • 21 Июня 2012 17:14
    romgerman
    Зачем делать фигню, которая работает только в 2-х, 3-х браузерах, если их всего 5.
    • 4 Июля 2012 18:11
      Curtis
      Хочу вас разочаровать, браузеров очень много, если вы знаете всего 5 я вам сочувствую как веб внбмастеру...
  • 21 Июня 2012 18:22
    Assada
    Ну вот зачем эти уроки по CSS3? Они же не кроссбраузерные, унылые и некрасивые!
  • 21 Июня 2012 21:39
    WooX
    Зачем скачивать и проверять, если в самом уроке написано для каких браузеров анимации?
    webkit-animation
    moz-animation
    Обидно, что в опере не работает.
    • 11 Сентября 2014 04:53
      Кирилл114
      ТОЧНО!!!
  • 22 Июня 2012 04:02
    robot16
    Понравилось. Может, вставлю куда-нибудь))
  • 25 Июня 2012 14:49
    Septor
    Работает только в хроме, лисе и сафари, в сафари дёргается заметно. В остальных, типа опера и 9-й осёл, вообще не выводит не чего, а в 7-8 осле не крутит, чисто одна фотка и текст жёстко сидят. Что касается ослов 7-8, то тут всё понятно, они не поддерживают почти ни как ксс3, а вот опера 12, это уже полный позор, на свалку оперу. Правда непонятно почему в 9-м осле не работает, видно ещё не включили в поддержку данные ксс стили. Хотя с ослом и так всё ясно, он всегда черепашьим ходом развивался. А для тех кто грит, зачем такие уроки, а шоб было.., сегодня не работает, а завтра будет работать, учитесь, и сидите на правильных браузерах а не на допотопных ослах и кривых типа оперы.
  • 3 Сентября 2012 22:01
    Perfecthus
    В демо пусто, браузер Opera 12, хоть бы кроссбраузерно делали, а иначе не вижу смысла в таких уроках :\
  • 26 Сентября 2013 01:56
    totgott
    можно и в опере сделать и эксплорере. в 12 опере работает у меня сделал. спасибо автору за идею. подобные вещи очень интересно сделать адаптивными к размерам зоны и изображения. красиво может получится. попробую сделать это и с другими эффектами
    • 25 Ноября 2013 05:22
      Vershik
      Может подскажешь.? Или кода подкинешь.
  • 11 Октября 2013 18:17
    totgott
    почему только 4 слайдера? никак нельзя сделать больше? попробовал больше фигня получается. может кто подскажет как сделать
    • 25 Ноября 2013 05:29
      Vershik
      Ну если браузеры обучил, то картинку пятую и шестую. и...., - добавить не проблема. Посмотри код CSS, разберись со временем и частями.
  • 30 Ноября 2013 15:47
    webmastersb
    Подскажите как добиться работы этого слайдера в опере? Пробовал добавить префикс -o для оперы(как было сказано на сайте автора), но все равно не работает.
  • 24 Января 2014 23:35
    mogrim90
    Во всех браузерах отображается нормально! Отличный пример! Проблема в Chrome, после проигрывания 4ёх слайдов остаётся пустое место пока не наступит время 2-го. Убирал анимацию текста описания слайда, слайды отображаются нормально. В чём может быть загвоздка? Анимации как-то некорректно накладываются друг на друга? Использую bitrix и twitter bootstrap.
  • 24 Марта 2014 21:43
    boris_86
    Уже два дня мучаюсь, никак не могу пристроить его не могу разобраться как сделать слайд на 2, на 3, на X фотографий.. правлю секундами, проявляется какой-то белый конечный фон.. или белиберда замучился ПОМОГИТЕ !!! мой емаил boris_86@mail.ru
    • 28 Июля 2015 12:23
      andropov_96
      Подскажи решил ли проблему?
  • 2 Апреля 2014 17:58
    serg250
    Для работы в Опере во всех местах убрать -webkit- оставить (пример @keyframes), а для ИЕ-11 заменить на -ms-(пример @-ms-keyframes), если нужен пример на 5 слайдов - пишите.
    • 1 Августа 2014 09:57
      sandi
      Приветствую serg250, нужен пример на 5 слайдов
  • 29 Августа 2014 09:42
    Blacky0892
    Для своего проекта организовал добавление слайдов в данный слайдер через панель администратора, соответственно вся информация о слайдах у меня хранится в бд. Таким образом можно сделать слайдер для любого количества картинок. Чтобы корректно передвигались слайды, я использовал в css переменные php. Если кому интересно - пишите на почту - profiks07@gmail.com, поделюсь.
  • 4 Апреля 2015 14:15
    Gordankem
    Хорошо бы ещё, чтоб изображения грузились из указанной папки. И чтоб когда надо их можно было оттуда удалить и залить другие.
  • 28 Июля 2015 09:09
    andropov_96
    Подскажите пожалуйста, как уменьшить скорость переключения слайдов.
  • 18 Ноября 2015 13:53
    STECLODUV
    поставил слайдер, был флеш его не видно было в телефоне и планшете, теперь все видно. но в хроме и иэ, он отображается в разных местах, помогите минипакдв.рф скажу сразу я лузер поэтому умными фразами не надо бросаться, лучше пальцем покажите.заранее спасибо
  • 3 Января 2016 17:33
    proliteweb
    Здорово, поигрался, понял работу keyframes и настройки анимации) Кстати кому интересно, вот слайдер с помощью Margin, тоже на keyframes, но без управления естественно) http://codepen.io/anon/pen/adBEWP
  • 1 Марта 2016 12:29
    Demo2
    Можно ли как то вставить в картинку ссылку?
  • 11 Апреля 2016 17:48
    Alexander_Muromtsev
    О чем речь, Господа. Вообще все эти ваши компьютеры не работают без электричества. Никола Тесла 75 лет назад говорил, что провода будут не нужны. Я уехал в тайгу, жду, жду, уже прошло 75 лет а электричества нет. Поэтому могу смело заявить что компьютер абсолютно бесполезен, не нужен и не приносит пользу. О каких-то браузерах говорите, якобы их много. какие-то версии пишете, ??? У меня IE-1 и Windows 3.11 самая новая. И, да у меня тоже не работает. Не кросс браузерный слайдер. Еще хочу, чтобы мой мотоцикл как самолет летал, иначе зачем мне ракетное топливо. Господа, те, кому не нравится - не пользуйтесь. У меня один клиент использует только IE 6. Поэтому на его сайте табличная вёрстка. Подумайте, что для Вас лучше.
  • 12 Апреля 2016 08:09
    Alexander_Muromtsev
    А если серьёзно, то всё работает. И работает очень хорошо. Главное просто и сам урок очень понятный. Спасибо Вам Евгений и Вашей команде.
  • 2 Августа 2016 09:32
    Tefftel
    Почитал коменты. Началось все с 2012 года. То там не работает, то там. И тут бац! В 2016 году человек пишет да все работает что вы?!!!! Ну уже какбы естественно. Как где-то в середине промежутка написал человек, совершенно верно написал. Не стоит хаять уроки. Сейчас в каком-то браузере может и не работать, но потом будет. Но в целом суть урока научиться делать подобные вещи. Приспосабливать под что-то иное, делать из них что-то новое. Уроки для обцчения, А НЕ ДЛЯ КОПИПАСТА НА ВАШИ САЙТЫ!
^ Наверх ^