Делаем самостоятельно слайдер на css. Интересный и одновременно простой слайдер на чистом CSS3. Остановка ротации при выборе слайда

Слайдер без использования JavaScript с крутым эффектом перелистывания слайдов. Отлично адаптируется под любые устройства. Исходники в наличии.

Особенность: слайдер на CSS

Слайдер на чистом CSS — это готовый слайдер с автоматическим переключением слайдов без помощи JS-скриптов. Как правило, такой вид слайдеров ценится начинающими разработчиками или в том случае, когда нет возможности\необходимость подключать библиотеки.

Разумеется, проще воспользоваться специальными плагинами для создания слайдеров (таких очень много, на том же jQuery). Но данный слайдер соблазняет своим необычным эффектом перелистывания слайдов. При чем, с высокой производительностью.

Как использовать этот пример у себя на сайте

По ссылке выше, Вы можете скачать архив, в котором будет располагаться файл slider-css.html . Теоретически, все, что Вам необходимо для запуска слайдера на CSS на Вашем сайте, находится в этом файле. Вот Ваш алгоритм действий:

1. Копируем все стили блока слайдера, они находятся в теге

Обратите внимание, что контейнер.untitled имеет свойства position: absolute и возможно, Вам придется немного адаптировать его под себя.

2. Все слайды обернуты в

...

< div class = "untitled" >

< div class = "untitled__slides" >

. . .

< / div >

< / div >

3. В самом HTML-коде слайда разобраться несложно

London Scout Unsplash Profile

< div class = "untitled__slide" >

< div class = "untitled__slideBg" > < / div >

< div class = "untitled__slideContent" >

< span > London < / span >

< span > Scout < / span >

< a class = "button" href = "https://unsplash.com/@scoutthecity" target = "/black" > Unsplash Profile < / a >

Работая над книгой о jquery , я столкнулся с тем, что многие мои подписчики просили меня рассказать в ней как на jquery написать скрипт слайдера. Пардон, дорогие друзья! На дворе XXI век и, на наше счастье, нам доступны все прелести CSS3 , позволяющие реализовать подобные вещи без единой строчки javascript .

Часть 1.

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

Конечно, вы можете поинтересоваться: зачем изобретать велосипед, если полно реализаций слайдеров на javascript? Вот мои аргументы:

  1. CSS эффекты работают быстрее. Это хорошо заметно на мобильных устройствах.
  2. Чтобы создать слайдер не требуются навыки программирования.

Итак, для нашего примера, вам нужно четыре изображения, хотя в своем проекте вы можете сделать полоску с таким количеством изображений, какое вам нужно. Единственным условием является то, что все изображения должны быть одинакового размера. Еще, забыл вам сказать, наш слайдер будет адаптивным (да-да, адаптивная верстка , вы не ошиблись) и вы сможете использовать его в любых своих проектах для любых устройств. Но, довольно болтовни, у меня уже руки чешутся написать мега-код. Начнем с HTML :

Я оставил пустым атрибут alt , чтобы сэкономить место, Вы же можете его заполнить сами, исходя из ваших SEO запросов и для информирования пользователей, отключивших в браузере показ картинок. Хочу также обратить ваше внимание на то, что первое изображение (alladin.jpg ) будет присутствовать и в конце полосы, что позволит нашему слайдеру прокручиваться циклично без рывков.

Для удобства width составляет 80% окна, а max-width соответствует размеру каждой отдельной фотографии (1000 пикселей в нашем примере), поскольку нам не нужно растянутое изображение:

Slider { width: 80%; max-width: 1000px; }

В нашем коде CSS, ширина figure выражена в процентном отношении к div , в котором она расположена. То есть, если полоса изображений содержит пять фотографий, а div выдает всего одно, ширина figure увеличивается в пять раз, что составляет 500% ширины контейнера div:

Параметр font-size: 0 выкачивает из figure весь воздух, удаляя свободное пространство вокруг изображений и между ними. position: relative позволяет легко перемещать figure во время анимации.

Нам нужно поровну разделить фотографии внутри полосы изображений. Формула очень проста: если мы предположим, что ширина figure составляет 100%, каждое изображение должно занимать 1/5 горизонтального пространства:

Возникает потребность в использовании следующего CSS правила:

Imagestrip img { width: 20%; height: auto; }

Теперь поменяем свойство overflow для div:

Slider { width: 80%; max-width: 1000px; overflow: hidden }

Наконец, нам надо сделать так, чтобы полоса изображений перемещалась слева направо. Если ширина контейнера div составляет 100%, каждое движение полосы изображений влево будет измеряться в процентных долях этого расстояния:

@keyframes slidy { 20% { left: 0%; } 25% { left: -100%; } 45% { left: -100%; } 50% { left: -200%; } 70% { left: -200%; } 75% { left: -300%; } 95% { left: -300%; } 100% { left: -400%; } }

Каждое изображение на слайдере будет заключено в div и будет перемещаться на 5%.

Slider figure { position: relative; width: 500%; animation: 30s slidy infinite; font-size: 0; padding: 0; margin: 0; left: 0; }

Часть 2.

Мы сделали мега-крутой слайдер без javascript . А давайте, прежде чем пойти почивать на лаврах, добавим в него кнопки управления. Точнее, не в него (с ним мне уже лень возиться), а создадим новый.


Так, наш HTML код:

Теперь позаботимся об анимации наших слайдов. К сожалению, для разного числа слайдов она будет отличаться:

/* для слайдера из двух слайдов */ @keyframes slider__item-autoplay_count_2 { 0%{opacity:0;} 20%{opacity:1;} 50%{opacity:1;} 70%{opacity:0;} 100%{opacity:0;} } /* для слайдера из трех слайдов */ @keyframes slider__item-autoplay_count_3 { 0%{opacity:0;} 10%{opacity:1;} 33% {opacity:1;} 43% {opacity:0;} 100%{opacity:0;} } /* для слайдера из четырех слайдов */ @keyframes slider__item-autoplay_count_4 { 0%{opacity:0;} 8% {opacity:1;} 25% {opacity:1;} 33% {opacity:0;} 100%{opacity:0;} } /* для слайдера из пяти слайдов */ @keyframes slider__item-autoplay_count_5 { 0%{opacity:0;} 7% {opacity:1;} 20%{opacity:1;} 27% {opacity:0;} 100%{opacity:0;} }

Печально, не так ли? Кроме того, не забудьте, что для Оперы, Хрома, ИЕ, и Мозиллы нужно написать все тоже самое, но с соответствующим префиксом. Теперь напишем код для анимации наших слайдов (здесь и далее будет показан код для трех слайдов. Код для большего числа сайтов Вы можете увидеть в коде примера):

Slider_count_3 .item { -moz-animation: slider__item-autoplay_count_3 15s infinite; -webkit-animation: slider__item-autoplay_count_3 15s infinite; -o-animation: slider__item-autoplay_count_3 15s infinite; animation: slider__item-autoplay_count_3 15s infinite; } .item:nth-of-type(2) { -moz-animation-delay:5s; -webkit-animation-delay:5s; -o-animation-delay:5s; animation-delay:5s; } .item:nth-of-type(3) { -moz-animation-delay:10s; -webkit-animation-delay:10s; -o-animation-delay:10s; animation-delay:10s; }

Как видите, для первой пары нулевое смещение не меняется. Кроме того, смещение не зависит от количества слайдов, поэтому его можно описать один раз для максимального числа слайдов. Теперь сделаем так, чтобы слайды не менялись, когда пользователь навел курсор мыши на наш слайдер:

Slider:hover .item { -moz-animation-play-state: paused; -webkit-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused; }

Наконец, мы с вами добрались до переключения наших слайдов. Как известно, есть целый ряд событий, позволяющих менять свойства элемента при помощи CSS. Для клика мыши нам могут помочь псевдоклассы :focus , :target , или :checked у одного из элементов страницы. Псевдокласс:focus может быть только у одного элемента на страницу, :target засоряет историю браузера и требует наличие тега ; псевдокласс:checked запоминает состояние до ухода со страницы, и, в случае радиокнопок, может быть выбран только у одного элемента в группе. Воспользуемся этим. Вставим перед

следующий HTML код

А после

:

/* Стиль слайдеров в состоянии "не выбран" */ .slider .item ~ .item { opacity: 0.0; } /* Стиль слайдеров в состоянии "выбран" */ .slider input:nth-of-type(1):checked ~ .item:nth-of-type(1), .slider input:nth-of-type(2):checked ~ .item:nth-of-type(2), .slider input:nth-of-type(3):checked ~ .item:nth-of-type(3), .slider input:nth-of-type(4):checked ~ .item:nth-of-type(4), .slider input:nth-of-type(5):checked ~ .item:nth-of-type(5) { opacity: 1.0; }

Мы использовали переключение свойства opacity слайда-контейнера с картинкой. Это связано с тем, что в div-контейнер, в отличие от элемента img, можно поместить любую дополнительную информацию (например, название слайда). Конечно, если бы мы пользовались Javascript, мы могли бы воспользоваться атрибутом data. Но мы с вами договорились, помните?)) Для слайдов укажем свойства transition, чтобы переключение происходило плавно, а не рывками.

Slider .item { -moz-transition: opacity 0.2s linear; -webkit-transition: opacity 0.2s linear; -o-transition: opacity 0.2s linear; transition: opacity 0.2s linear; }

Остановка анимации всех слайдов и кнопок при выборе любого слайда осуществим при помощи следующего CSS кода:

Slider input:checked ~ .item { opacity: 0.0; -moz-animation: none; -webkit-animation: none; -o-animation: none; animation: none; }

Для поддержки некоторых старых браузеров мы не анимируем первый слайд, установив для него opacity: 1.0 , но при этом мы поимеем проблему: при плавном переключении двух других слайдов между собой, первый слайд просвечивает. Для ликвидации этого бага устанавливаем задержку transition-delay для всех слайдов, кроме выбранного, а для него сделаем z-index больше, чем у всех остальных слайдов:

Slider .item { opacity: 1.0; -moz-transition: opacity 0.0s linear 0.2s; -webkit-transition: opacity 0.0s linear 0.2s; -o-transition: opacity 0.0s linear 0.2s; transition: opacity 0.0s linear 0.2s; } .slider input:nth-of-type(1):checked ~ .item:nth-of-type(1), .slider input:nth-of-type(2):checked ~ .item:nth-of-type(2), .slider input:nth-of-type(3):checked ~ .item:nth-of-type(3), .slider input:nth-of-type(4):checked ~ .item:nth-of-type(4), .slider input:nth-of-type(5):checked ~ .item:nth-of-type(5) { transition: opacity 0.2s linear; -moz-transition: opacity 0.2s linear; -webkit-transition: opacity 0.2s linear; -o-transition: opacity 0.2s linear; z-index: 6; }

Чтобы слайды не конфликтовали с другими элементами сайта (например, не перекрывали выпадающее меню с z-index менее или равным 6), создаем свой контекст для блока

путем задания минимально, необходимого для видимости, z-index:

Slider { position: relative; z-index: 0; }

Вот собственно говоря и все. Осталось только спозиционировать наши элементы с помощью нижеследующего CSS кода и можно радоваться:

Slider { position: relative; z-index:0; } .slider input { display: none; } .slider label { bottom: 10px; display: inline-block; z-index: 2; width: 26px; height: 27px; background: #f4f4f5; border: 1px solid #e6e6e6; border-bottom-color: #bfbfbf; border-radius: 4px; box-shadow: inset 0 1px 0 #ffffff, 0 1px 2px #000000; text-align: center; cursor: pointer; font: 14px/27px arial, tahoma; color: #333; } .slider .selector_list { position: absolute; bottom: 15px; right: 15px; z-index: 11; } .slider .item { position: relative; width:100%; } .slider .item ~ .item { position: absolute; top: 0px; left: 0px; }

Вот такой адаптивный слайдер без Javascript на CSS3 у вас должен получиться в итоге.

Слайдер на CSS имеет ряд преимуществ над слайдерами на jQuery. Мы отказываемся от громоздких плагинов, благодаря чему повышается скорость загрузки сайта, а использование CSS анимации делает смену слайдов более плавной. Именно поэтому я хочу вас научить как сделать слайдер на CSS3.

Для работы с этим уроком вам нужно иметь общее представление о CSS3 переходах и анимации по ключевым кадрам. Используя эту простую концепцию, мы увидим как сделать слайдер изображений. Пожалуйста, обратите внимание, что эти свойства будут работать только в современных браузерах (в частности IE10+).

Слайдер на CSS3

Базовые концепции CSS переходов

Обычно, когда вы измените значение CSS, изменение происходит мгновенно. Теперь, благодаря универсальному CSS3 свойству transition , мы можем легко анимировать от старого к новому состоянию.

Мы можем использовать четыре свойства перехода:

  1. transition-property - определяет CSS свойства, к которым должны быть применены переходы.
  2. transition-duration - определяет длительность переходов.
  3. transition-timing-function - определяет, как рассчитываются промежуточные значения перехода. Эффекты от функции времени задержки обычно называют реверсивными функциями.
  4. transition-delay - определяет когда начинается переход.

Поскольку технология все еще относительно новая, потребуется использовать префиксы для браузеров. Мы будем опускать их в примерах кода в этой статье, но не забудьте включить их в своем коде чтобы ваш слайдер на CSS работал должным образом. Давайте посмотрим, как применить простой переход к ссылке:

A { color: #000; transition-property: color; transition-duration: 0.7s; transition-timing-function: ease-in; transition-delay: 0.3s; } a:hover { color: #fff; }

При назначении анимации к элементу вы также можете использовать сокращенную запись:

A { color: #000; transition: color 0.7s ease-in 0.3s; } a:hover { color: #fff; }

Давайте посмотрим как применять простую анимацию в div .

/* К этим элементам также применяем анимацию */ div { animation-name: move; animation-duration: 1s; animation-timing-function: ease-in-out; animation-delay: 0.5s; animation-iteration-count: 2; animation-direction: alternate; } /* Это код анимации */ @keyframes move { from { transform: translateX(0); } to { transform: translateX(100px); } }

Но мы можем использовать сокращенную запись записав все свойства анимации сразу:

Div { animation: move 1s ease-in-out 0.5s 2 alternate; }

Ключевые кадры для CSS слайдера

Ключевые кадры определяют то, как анимация выглядит на каждом этапе временной шкалы. Ключевые кадры используют процентное значение для определения времени: 0% это начало анимации, а 100% конец. Вы можете также добавить ключевые кадры для промежуточной анимации.

/* Анимация от 0% до 100% */ @keyframes move { 0% { transform: translateX(0); } 100% { transform: translateX(100px); } } /* Анимация с промежуточными ключевыми кадрами */ @keyframes move { 0% { transform: translateX(0); } 50% { transform: translateX(20px); } 100% { transform: translateX(100px); } }

Структура CSS-слайдера

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

Как функционирует анимация слайдера

Как видите, наш слайдер - это контейнер, внутри которого отображаются изображения. Анимация здесь очень простая: изображение следует по предварительно определенному пути путем анимации свойства top и меняя свойства z-index и opacity когда изображение возвращается в исходное состояние. Давайте погрузимся в HTML-разметку для создания слайдера.

  • Пума

    • ...

  • Солнечные ванны

HTML-разметка очень проста и SEO дружелюбна. Рассмотрим в деталях, как все работает:

  • div id="slider"

    Это главный контейнер слайдера. Он не имеет определенной функции, но мы должны приостановить его анимацию.

  • div id="mask"

    Мы будем использовать маску для CSS слайдера, чтобы скрыть все, что происходит за его пределами.

  • li id="first" class="firstanimation"

    Каждый элемент списка имеет идентификатор и класс. Идентификатор отвечает за подсказку, а класс привязан к анимации, которая должена произойти.

  • div class="tooltip"

    Блок для отображения названия изображения. Вы можете изменить его под свои нужды, например, сделав его интерактивными, и добавив краткое описание.

  • div class="progress-bar"

    Он содержит функцию, которая показывает ход анимации.

Теперь пришло время для CSS стилей.

CSS стили слайдера

Давайте создадим базовую структуру слайдера. Он будет иметь тот же размер, что и изображение. CSS cвойство border будет полезно для создания рамки вокруг изображения.

/* Структура слайдера */ .slider { background: #000; border: 5px solid #eaeaea; box-shadow: 1px 1px 5px rgba(0,0,0,0.7); height: 320px; width: 680px; margin: 40px auto 0; overflow: visible; position: relative; }

Блок mask скроет все элементы, которые лежат за пределами слайдера; его высота должна быть равна высоте слайдера.

/* Спрячем все */ .mask { overflow: hidden; height: 320px; }

Наконец, чтобы отсортировать список изображений, мы зададим position: absolute и top: -325px , так что все изображения будут расположены за пределами слайдера.

/* Список изображений */ .slider ul { margin: 0; padding: 0; position: relative; } .slider li { width: 680px; /* Ширина изображения */ height: 320px; /* Длина изображения */ position: absolute; top: -325px; /* Исходное положение - вне слайдера */ list-style: none; }

С помощью этих нескольких строк кода мы создали наш слайдер без javascript, осталось только добавить анимацию.

Ключевые кадры CSS анимации

Анимация изображения для слайдера

Прежде чем мы начнем работать с анимацией, мы должны указать некоторые параметры для того, чтобы получить правильный вид анимации. Oбщая продолжительность нашей анимации - 25 секунд, но мы должны знать, сколько ключевых кадров равны 1 секунде. Итак, давайте рассмотрим серию операций, которые дадут нам точное число ключевых кадров на основе анимируемых изображений. Вот расчеты:

  1. Общее количество изображений в слайдере - 5
  2. Продолжительность анимации для каждого изображения - 5 секунд
  3. Общая продолжительность анимации - 5 изображений × 5 секунд = 25 секунд
  4. Подсчитаем сколько ключевых кадров равны одной секунде, для этого разделим общее количество ключевых кадров на общую продолжительность анимации: 100 ключ. кадров / 25 сек. = 4 ключ. кадра

Теперь мы можем применить CSS анимацию к слайдеру. Мы сможем поставить анимацию на бесконечный цикл, потому что у каждого изображения своя собственная анимация.

Firstanimation { animation: cycle 25s linear infinite; } .secondanimation { animation: cycletwo 25s linear infinite; } .thirdanimation { animation: cyclethree 25s linear infinite; } .fourthanimation { animation: cyclefour 25s linear infinite; } .fifthanimation { animation: cyclefive 25s linear infinite; }

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

/* Анимация на примере первых двух изображений */ @keyframes cycle { 0% { top: 0px; } /* При запуске слайда первое изображение уже видно */ 4% { top: 0px; } /* Исходное положение */ 16% { top: 0px; opacity:1; z-index:0; } /* От 4% до 16% = изображение видно 3 секунды */ 20% { top: 325px; opacity: 0; z-index: 0; } /* От 16% до 20% = 1 секунда на уход изображения */ 21% { top: -325px; opacity: 0; z-index: -1; } /* Вернуться в исходную позицию */ 92% { top: -325px; opacity: 0; z-index: 0; } 96% { top: -325px; opacity: 0; } /* От 96% до 100% = 1 секунда на появление изображения */ 100%{ top: 0px; opacity: 1; } } @keyframes cycletwo { 0% { top: -325px; opacity: 0; } /* Исходное положение */ 16% { top: -325px; opacity: 0; }/* Начинает двигаться на эту позицию после 16% */ 20% { top: 0px; opacity: 1; } 24% { top: 0px; opacity: 1; } /* От 20% до 24% = 1 секунда на появление изображения */ 36% { top: 0px; opacity: 1; z-index: 0; } / * От 24% до 36% = изображение видно 3 секунды * / 40% { top: 325px; opacity: 0; z-index: 0; } /* От 36% до 40% = 1 секунда на уход изображения */ 41% { top: -325px; opacity: 0; z-index: -1; } /* Вернуться в исходную позицию */ 100%{ top: -325px; opacity: 0; z-index: -1; } }

Создав анимацию, мы должны добавить прогресс бар для отображения продолжительности каждой анимации.

Индикатор прогресса (прогресс-бар)

Процесс создания анимации индикатора такой же, как и у слайдера. Во-первых, мы создаем сам индикатор:

/* Индикатор прогресса слайдера */ .progress-bar { position: relative; top: -5px; width: 680px; height: 5px; background: #000; animation: fullexpand 25s ease-out infinite; }

Не бойтесь синтаксиса, описанного ниже: он также задает состояние "from" и "to".

/* CSS3 анимация индикатора прогресса слайдера */ @keyframes fullexpand { /* В этих ключевых кадрах индикатор находится в неподвижном состоянии */ 0%, 20%, 40%, 60%, 80%, 100% { width: 0%; opacity: 0; } /* В этих ключевых кадрах прогресс-бар начинает оживать */ 4%, 24%, 44%, 64%, 84% { width: 0%; opacity: 0.3; } /* В этих ключевых кадрах индикатор движется вперед в течение 3 секунд */ 16%, 36%, 56%, 76%, 96% { width: 100%; opacity: 0.7; } /* В этих ключевых кадрах прогресс-бар закончил свой путь */ 17%, 37%, 57%, 77%, 97% { width: 100%; opacity: 0.3; } /* В этих ключевых кадрах прогресс-бар исчезнет, а затем цикл возобновится */ 18%, 38%, 58%, 78%, 98% { width: 100%; opacity: 0; } }

CSS3 анимация подсказки слайдера

Слайдер уже почти готов, но давайте добавим несколько деталей, чтобы сделать его более функциональным. Мы добавим подсказки для названий изображений, которые будут видны при наведении.

Вот CSS для всплывающих подсказок:

Tooltip { background: rgba(0,0,0,0.7); width: 300px; height: 60px; position: relative; bottom: 75px; left: -320px; } .tooltip h1 { color: #fff; font-size: 24px; font-weight: 300; line-height: 60px; padding: 0 0 0 10px; }

Здесь мы сделали так, что показываются только заголовки изображений, но вы можете сделать то же самое с пользовательским контентом, ссылками и пр.

Анимация подсказки при наведении

Мы видели, как применить CSS3 переходы элементов; Теперь давайте сделаем это в подсказках.

Tooltip { … transition: all 0.3s ease-in-out; } .slider li:hover .tooltip { left: 0px; }

Пауза и продолжение анимации слайдера

Остановка анимации при наведении курсора мыши

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

Slider: hover li, .slider:hover .progress-bar { animation-play-state: paused; }

Заключение и бонусный CSS3 слайдер)

Наконец, мы достигли конца урока. CSS3 слайдер теперь готов на 100%! Взгляните на демонстрационный пример CSS слайдера без Javascript . Он работает в Firefox 5+, Safari 4+, IE10+ и Google Chrome, а также iPhone и IPad..

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

1. Превосходное jQuery слайд-шоу

Большое эффектное слайд-шоу с использованием jQuery технологий.

2. jQuery плагин «Scale Carousel»

Масштабируемое слайд-шоу с использованием jQuery. Вы сможете задать размеры для слайд-шоу, которые вам больше всего подходят.

3. jQuery плагин «slideJS»

Слайдер изображений с текстовым описанием.

4. Плагин «JSliderNews»

5. CSS3 jQuery слайдер

При наведении курсора на стрелки навигации появляется круглая миниатюра следующего слайда.

6. Симпатичный jQuery слайдер «Presentation Cycle»

jQuery слайдер с индикатором загрузки изображений. Предусмотрена автоматическая смена слайдов.

7. jQuery плагин «Parallax Slider»

Слайдер с объемным фоновым эффектом. Изюминка этого слайдера в движение фона, который состоит из нескольких слоев, каждый из которых прокручивается с различной скоростью. В итоге получается имитация объемного эффекта. Выглядит очень красиво, вы можете сами в этом убедиться. Более плавно эффект отображается в таких браузерах как: Opera, Google Chrome, IE.

8. Свежий, легкий jQuery слайдер «bxSlider 3.0»

На демонстрационной странице в разделе «examples» вы сможете найти ссылки на все возможные варианты использования этого плагина.

9. jQuery слайдер изображений, плагин «slideJS»

Стильный jQuery слайдер, безусловно сможет украсить ваш проект.

10. jQuery плагин слайд-шоу «Easy Slides» v1.1

Простой в использовании JQuery плагин для создания слайд-шоу.

11. Плагин «jQuery Slidy»

Легкий jQuery плагин в различном исполнении. Предусмотрена автоматическая смена слайдов.

12. jQuery CSS галерея с автоматической сменой слайдов

Если посетитель в течении определенного времени не нажмет на стрелки «Вперед» или «Назад», то галерея начнет прокручиваться автоматически.

13. jQuery слайдер «Nivo Slider»

Очень профессиональный качественный легкий плагин с валидным кодом. Предусмотрено много различных эффектов смены слайдов.

14. jQuery слайдер «MobilySlider»

Свежий слайдер. jQuery слайдер с различными эффектами смены изображений.

15. jQuery Плагин «Slider²»

Легкий слайдер с автоматической сменой слайдов.

16. Свежий javascript слайдер

Слайдер с автоматической сменой изображений.

Плагин для реализации слайд-шоу с автоматической сменой слайдов. Есть возможность управлять показом с помощью миниатюр изображений.

jQuery CSS слайдер изображений с использованием плагина NivoSlider .

19. jQuery слайдер«jShowOff»

Плагин для ротации содержимого. Три варианта использования: без навигации (с автоматической сменой в формате слайд-шоу), с навигацией в виде кнопок, с навигацией в виде миниатюр изображений.

20. Плагин «Shutter Effect Portfolio»

Свежий jQuery плагин для оформления портфолио фотографа. В галерее реализован интересный эффект смены изображений. Фотографии сменяют друг друга с эффектом похожим на работу затвора объектива.

21. Легкий javascript CSS слайдер «TinySlider 2»

Реализация слайдера изображений с использованием javascript и CSS.

22. Обалденный слайдер «Tinycircleslider»

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

23. Слайдер изображений на jQuery

Легкий слайдер «Slider Kit». Слайдер представлен в различном исполнении: вертикальный и горизонтальный. Также реализованы различные виды навигации между изображениями: с помощью кнопок «Вперед» и «Назад», с помощью колеса мыши, с помощью клика мыши по слайду.

24. Галерея с миниатюрами «Slider Kit»

Галерея «Slider Kit». Прокрутка миниатюр осуществляется как в вертикальном так и горизонтальном направлении. Переход между изображениями осуществляется с помощью: колеса мыши, щелчка мыши или наведения курсора на миниатюру.

25. jQuery слайдер содержимого «Slider Kit»

Вертикальный и горизонтальный слайдер контента на jQuery.

26. jQuery слайд-шоу «Slider Kit»

Слайд-шоу с автоматической сменой слайдов.

27. Легкий профессиональный javascript CSS3 слайдер

Аккуратный слайдер на jQuery и CSS3, созданный в 2011 году.

jQuery слайд-шоу с миниатюрами.

29. Простое jQuery слайд-шоу

Слайд-шоу с кнопками навигации.

30. Потрясное слайд-шоу jQuery «Skitter»

jQuery плагин «Skitter» для создания потрясающего слайд-шоу. Плагин поддерживает 22 (!) вида различных анимационных эффектов при смене изображений. Может работать с двумя вариантами навигации по слайдам: с помощью номеров слайдов и с помощью миниатюр. Обязательно посмотрите демонстрацию, очень качественная находка. Используемые технологии: CSS, HTML, jQuery, PHP.

31. Слайд-шоу «Awkward»

Функциональное слайд-шоу. В виде слайдов могут выступать: простые изображения, изображения с подписями, изображения с всплывающими подсказками, видео-ролики. Для навигации можно использовать стрелки, ссылки на номера слайдов и клавиши вправо/влево на клавиатуре. Слайд-шоу выполнено в нескольких вариантах: с миниатюрами и без них. Для просмотра всех вариантов пройдитесь по ссылкам Demo #1 - Demo #6 расположенным сверху на демонстрационной странице.

Очень оригинальное оформление слайдера изображений, напоминающее веер. Анимированная смена слайдов. Навигация между изображениями осуществляется с помощью стрелок. Предусмотрена также автоматическая смена, которую можно включать и выключать с помощью кнопки Play/Pause, расположенной сверху.

Анимированный jQuery слайдер. Фоновые изображения автоматически масштабируются при изменении размеров окна браузера. Для каждого изображения выплывает блок с описанием.

34. «Flux Slider» слайдер на jQuery и CSS3

Новый jQuery слайдер. Несколько классных анимированных эффектов при смене слайдов.

35. jQuery плагин «jSwitch»

Анимированная jQuery галерея.

Легкое слайд-шоу на jQuery c автоматической сменой слайдов.

37. Новая версия плагина «SlideDeck 1.2.2»

Профессиональный слайдер контента. Возможны варианты с автоматической сменой слайдо, а также вариант с использованием колеса мыши для перехода между слайдами.

38. jQuery слайдер «Sudo Slider»

Легкий сладер изображений на jQuery. Очень много вариантов реализации: горизонтальная и вертикальная смена изображений, со ссылками на номер слайда и без них, с подписями изображений и без, различные эффекты смены изображений. Есть функция автоматической смены слайдов. Ссылки на все примеры реализации можно найти на демонстрационной странице .

39. jQuery CSS3 слайд-шоу

Слайд-шоу с миниатюрами поддерживает режим автоматической смены слайдов.

40. jQuery cлайдер «Flux Slider»

Слайдер с множеством эффектов смены изображений.

41. Простой jQuery слайдер

Стильный слайдер изображений на jQuery.

Я никому не открою Америку, не удивлю публику новым фокусом и не взорву мозг тем, кто в CSS3 плавает, как аквалангист. Расскажу простой способ, как создать слайдер с помощью простых функций CSS3 без необходимости использовния javascript.

1. Верстаем основу

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


Здесь мы видим, что общий блок «wrapper» содержит в себе блок «slider» с 5-ю слайдами, внутри которых можно поместить любой html-код, который будет располагаться на слайде. Перед общим блоком находятся радио-кнопки, которые впоследствии будут скрыты, чтобы создать для них собственную панель навигации по слайдам, с которой нам помогут лейблы в блоке «controls».

2. Оформляем слайдер

Здесь мы остановимся и немного рассмотрим css. Обратите внимание, что для некоторых свойств проставлены кроссбраузерные префиксы, чтобы все современные браузеры могли их понимать.

* { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } body { background-image: url(http://habrastorage.org/files/996/d76/d04/996d76d0410d422fa54cc433ce7ead2a.png); }
С оформлением фона и общими стилями всё понятно.

Wrapper { height: 350px; margin: 100px auto 0; position: relative; width: 700px; } .slider { background-color: #ddd; height: inherit; overflow: hidden; position: relative; width: inherit; -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .5); -moz-box-shadow: 0 0 20px rgba(0, 0, 0, .5); -o-box-shadow: 0 0 20px rgba(0, 0, 0, .5); box-shadow: 0 0 20px rgba(0, 0, 0, .5); }
Общий блок и блок с слайдером имеют одинаковые размеры, чтобы идеально контролировать положение слайдера на странице. Пока отсутствуют слайды, слайдер мы временно покрасили в светло-серый цвет.

Wrapper > input { display: none; }
Радио-кнопки скрываем. Они нам понадобятся позже.

Результат на данный момент такой:

3. Оформляем слайды

Здесь мы пропишем общие стили для слайдов и каждый слайд отдельно:

Slides { height: inherit; position: absolute; width: inherit; } .slide1 { background-image: url(http://habrastorage.org/files/3f2/628/bd5/3f2628bd58c8452db516195cb0c9bfc9.jpg); } .slide2 { background-image: url(http://habrastorage.org/files/3e1/95d/c7f/3e195dc7f5a64469807f49a14f97ba0e.jpg); } .slide3 { background-image: url(http://habrastorage.org/files/663/6b1/d4f/6636b1d4f8e643d29eab8c192fc1cea3.jpg); } .slide4 { background-image: url(http://habrastorage.org/files/e59/424/c04/e59424c046be4dab897d84ab015c87ea.jpg); } .slide5 { background-image: url(http://habrastorage.org/files/53c/ff6/c1c/53cff6c1caf842368c70b8ef892d8402.jpg); }
Для всех слайдов мы указали абсолютное позиционирование, чтобы можно было играть с эффектами появления. Размеры слайдов берутся из размера самого слайдера, чтобы не приходилось их прописывать в нескольки местах.

4. Делаем навигацию по слайдам

Так как радио-кнопки скрыты и нужны нам как переключатели, оформляем подготовленные лейблы:

Wrapper .controls { left: 50%; margin-left: -98px; position: absolute; } .wrapper label { cursor: pointer; display: inline-block; height: 8px; margin: 25px 12px 0 16px; position: relative; width: 8px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; } .wrapper label:after { border: 2px solid #ddd; content: " "; display: block; height: 12px; left: -4px; position: absolute; top: -4px; width: 12px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; }
Навигацию мы делаем классической. Каждая кнопка представляет собой область в виде круга, внутри которого при активном слайде пустая область частично окрасится. Пока же у нас следующий результат:

5. Учим кнопки нажиматься

Пришло время научить слайдер переключать слайды по нажатию на определённую кнопку:

Wrapper label { cursor: pointer; display: inline-block; height: 8px; margin: 25px 12px 0 16px; position: relative; width: 8px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -webkit-transition: background ease-in-out .5s; -moz-transition: background ease-in-out .5s; -o-transition: background ease-in-out .5s; transition: background ease-in-out .5s; } .wrapper label:hover, #slide1:checked ~ .controls label:nth-of-type(1), #slide2:checked ~ .controls label:nth-of-type(2), #slide3:checked ~ .controls label:nth-of-type(3), #slide4:checked ~ .controls label:nth-of-type(4), #slide5:checked ~ .controls label:nth-of-type(5) { background: #ddd; }
В оформленные кнопки навигации добавляем плавное окрашивание внутри них. Также добавляем условия, при которых активная кнопка и кнопка, на которую навели курсор, будет плавно окрашиваться. Наши собственные радио-кнопки готовы:

6. Оживляем слайдер

Ну, а теперь делаем так, чтобы слайды наконец-то переключались:

Slides { height: inherit; opacity: 0; position: absolute; width: inherit; z-index: 0; -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5); -webkit-transition: transform ease-in-out .5s, opacity ease-in-out .5s; -moz-transition: transform ease-in-out .5s, opacity ease-in-out .5s; -o-transition: transform ease-in-out .5s, opacity ease-in-out .5s; transition: transform ease-in-out .5s, opacity ease-in-out .5s; } #slide1:checked ~ .slider > .slide1, #slide2:checked ~ .slider > .slide2, #slide3:checked ~ .slider > .slide3, #slide4:checked ~ .slider > .slide4, #slide5:checked ~ .slider > .slide5 { opacity: 1; z-index: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); }
В общие стили слайдов мы добавляем свойства, при которых все слайды становятся невидимыми и уходят на задний план. Также мы добавили небольшое увеличение слайдов, пока они невидимы для придания интересного появления в слайдере.

Результат можно посмотреть здесь.