Слайды писать лучше на css или jquery. Адаптивный слайдер без Javascript на CSS3

Здравствуйте уважаемые начинающие веб-мастера.

Вот самый простой в мире слайдер на чистом CSS.

К преимуществам такого слайдера можно отнести лёгкость и безопасность, а так же то, что его сможет сделать и установить на свой сайт даже самый начинающий веб-мастер.

А недостаток в том, что только на CSS невозможно сделать повтор цикла.

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

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

Эффекты появления картинок можно изменить по своему вкусу, и в соответствии с возможностями CSS3. Давайте смотреть где и как это можно сделать.

Слайдер CSS

/* Блок слайдера */
#slaid {
/* Задаём относительное позиционирование */
position : relative ;
/*Размер и рамка блока*/
width : 400px ;
height : 200px ;
border : 2px solid #333 ;
border-radius : 5px ;
}
/* Групповой селектор для 7-ми картинок */
.image1,
.image2,
.image3,
.image4,
.image5,
.image6,
.image7 {
/* Позиционируем абсолютно относительно блока */
position : absolute ;
/* Делаем их полностью прозрачными */
opacity : 0 ;
width : 400px ;
height : 200px ;
}
/* Подключаем анимацию к первой картинке */
.image1 {
animation : one-image 8s 1s ease alternate ;
}
/* Анимация последующих картинок выполняется с задержкой начала необходимой для прокрутки предыдущих изображений */
.image2 {
animation : two-image 8s 5s ease alternate ;
}
.image3 {
animation : three-image 8s 10s ease alternate ;
}
.image4 {
animation : four-image 8s 14s ease alternate ;
}
.image5 {
animation : five-image 8s 18s ease alternate ;
}
.image6 {
animation : six-image 8s 22s ease alternate ;
}
.image7 {
animation : seven-image 8s 26s ease alternate ;
}
/* Последняя картинка не прозрачная остаётся видной после прокрутки */
.image8 {
position : absolute;
width : 400px ;
height : 200px ;
animation : eight-image 34s ease alternate ;
}
/* Анимации для первой картинки */
@keyframes one-image {

/* Задаём изменение прозрачности. Здесь можно добавить вращение, перемещение из-за границ блока или появление из центра (масштабирование) */
0% {
opacity : 1 ;
}
50% {
opacity : 1 ;
}
100% {
opacity : 0 ;
}
}
/* Анимация для следующих 6-и картинок */
@keyframes two-image {
0% {
opacity : 0 ;
}
50% {
opacity : 1 ;
}
100% {
opacity : 0 ;
}
}

@keyframes three-image {
0% {
opacity : 0 ;
}
50% {
opacity : 1 ;
}
100% {
opacity : 0 ;
}
}

@keyframes four-image {
0% {
opacity : 0 ;
}
50% {
opacity : 1 ;
}
100% {
opacity : 0 ;
}
}

@keyframes five-image {
0% {
opacity : 0 ;
}
50% {
opacity : 1 ;
}
100% {
opacity : 0 ;
}
}

@keyframes six-image {
0% {
opacity : 0 ;
}
50% {
opacity : 1 ;
}
100% {
opacity : 0 ;
}
}

@keyframes seven-image {
0% {
opacity : 0 ;
}
50% {
opacity : 1 ;
}
100% {
opacity : 0 ;
}
}
/* Анимация для восьмой картинки */
@keyframes eight-image {
/* остаётся прозрачной пока не прокрутятся предыдущие */
0% {
opacity : 0 ;
}
87% {
opacity : 0 ;
}
/*Становиться видимой в конце работы слайдера */
100% {
opacity : 1 ;
}
}

И на всякий случай — чтобы появилась возможность прокрутить слайдер ещё раз можно добавить следующий код:

var CLN; onload = function () {CLN = document.getElementById ("slaid").cloneNode (3)}

При этом под слайдером появится кнопка которую можно назвать как Вам угодно и оформить в CSS.

P.S. Если постараться и подогнать интервалы показа картинок в @keyframes, то карусель можно сделать непрерывной.

У меня получилось. Можно посмотреть вот . Текст в баннерах прокручивается свойствами анимации без скрипта.

Правда получилось сделать только с тремя картинками.

P.P.S. Теперь подобные баннеры и на этом сайте под шапкой сайта.

Желаю творческих успехов.

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

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

Слайдер на CSS3

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

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

Поскольку технология все еще относительно новая, потребуется использовать префиксы для браузеров. Мы будем опускать их в примерах кода в этой статье, но не забудьте включить их в своем коде чтобы ваш слайдер на 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; }

Ключевые кадры определяют то, как анимация выглядит на каждом этапе временной шкалы. Ключевые кадры используют процентное значение для определения времени: 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); } }

Теперь, когда мы знаем как работают переходы и анимации, давайте посмотрим как создать наш слайдер, используя только 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 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, осталось только добавить анимацию.

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

Теперь мы можем применить 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; } }

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

Вот 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 слайдер теперь готов на 100%! Взгляните на демонстрационный пример CSS слайдера без Javascript . Он работает в Firefox 5+, Safari 4+, IE10+ и Google Chrome, а также iPhone и IPad..

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

Слайдеры на CSS имеют некоторое преимущество перед слайдерами на Javascript. Одно из таких преимуществ — это скорость загрузки. Мало того что изображения для слайдеров используются больших размеров (если нет оптимизации под разные экраны), так еще и на загрузку скриптов тратится некоторое время. Но в статье Вы увидите только слайдеры на чистом CSS.

Вот что я нашел на сайте на тему слайдеров:

Слайдер на CSS, который использует для навигации по слайдам радиокнопки. Эти радиокнопки находятся под слайдеров. Также помимо радиокнопок навигация осуществляется с помощью стрелок слева и справа. Чтобы следить за тем, какое изображение сейчас отображать — используются псевдоклассы :checked .

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

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

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

Еще один адаптивный слайдер, управление которого основано на радиокнопках. Чтобы посмотреть как этот слайдер будет смотреться на разных устройствах — Вы можете либо самостоятельно изменять окно браузера, либо на странице со слайдером есть специальные иконки разных устройств, кликая на которые, Вы увидите будет смотреться слайдер на компьютере, планшете или на смартфоне.

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

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

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

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

Итак, для нашего примера, вам нужно четыре изображения, хотя в своем проекте вы можете сделать полоску с таким количеством изображений, какое вам нужно. Единственным условием является то, что все изображения должны быть одинакового размера. Еще, забыл вам сказать, наш слайдер будет адаптивным (да-да, адаптивная верстка , вы не ошиблись) и вы сможете использовать его в любых своих проектах для любых устройств. Но, довольно болтовни, у меня уже руки чешутся написать мега-код. Начнем с 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; }

Мы сделали мега-крутой слайдер без 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 код

А после :

1 2 3

/* Стиль слайдеров в состоянии "не выбран" */ .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 у вас должен получиться в итоге.

C ollection of free HTML and CSS slider code examples: card, comparison, fullscreen, responsive, simple , etc. Update of June 2018 collection. 7 new items.

🔥 All new CSS sliders in this video (2019)

A set of onboarding screens in HTML/CSS/JS. A personal experiment with layering PNG icons, CSS3 transitions, & flexbox.

HTML, CSS and JavaScript information card slider.
Made by Andy Tran
November 23, 2015

Photo slider working on desktop and mobile browsers.
Made by Taron
September 29, 2014

A simple and clean image comparison slider, fully responsive and touch ready made with CSS and jQuery.

A before and after slider with only html and css.

Vanilla JS, minimal, nice to look.
Made by Huw
July 3, 2017

A "split-screen" slider element with JavaScript.

A little experiment for a before & after slider all inside a SVG. Masking makes it pretty simple. Since it’s all SVG, the images and captions scale nicely together. GreenSock’s Draggable and ThrowProps plugins were used for the slider control.
Made by Craig Roblewsky
April 17, 2017

Uses customised range input for slider.
Made by Dudley Storey
October 14, 2016

Responsive image comparison slider with HTML, CSS and JavaScript.
Made by Ege Görgülü
August 3, 2016

HTML5, CSS3 and JavaScript video before-and-after comparison slider.
Made by Dudley Storey
April 24, 2016

A handy draggable slider to quickly compare 2 images, powered by CSS3 and jQuery.
Made by CodyHouse
September 15, 2014

Simple slider based on radio inputs. 100% pure HTML + CSS. Works also with arrow keys.

Responsive: yes

Dependencies: -

Nice transition effect for fullscreen slider.

Horizontal parallax sliding slider with Swiper.js.

Responsive smooth 3D perspective slider on mouse move.

Fullscreen hero image slider (swipe panels theme) with HTML, CSS and JavaScript.
Made by Tobias Bogliolo
June 25, 2017

A slider interaction thing using Velocity and Velocity effects (UI Pack) to enhance the animation. Animation is triggered via arrow keys, nav click, or scrolling jack. This version includes borders as part of the interaction.
Made by Stephen Scaff
May 11, 2017

Simple slider in a minimal style to show off images. Part of the image pops out on each slide.
Made by Nathan Taylor
Jannuary 22, 2017

The thing is pretty easy customizable. You can safely change font, font size, font color, animation speed. The first letter of a new string in array in JS will appear on a new slide. Easy to create (or delete) a new slide: 1. Add new city in the array in JS. 2. Change number of slides variable and put a new image in scss list in CSS.
Made by Ruslan Pivovarov
October 8, 2016

This skewed slider with scrolling based on pure JS and CSS (without libraries).
Made by Victor Belozyorov
September 3, 2016

A slider animation with Pokemon design.
Made by Pham Mikun
August 18, 2016

HTML, CSS and JavaScritp slider with complex animation and half-collored angled text.
Made by Ruslan Pivovarov
July 13, 2016

Slider parallax effect with HTML, CSS and JavaScript.
Made by Manuel Madeira
June 28, 2016

HTML, CSS and JavaScript slider with ripple effect.
Made by Pedro Castro
May 21, 2016

Clip-Path revealing slider with HTML, CSS and JavaScript.
Made by Nikolay Talanov
May 16, 2016

GSAP + Slick slider with preview of previous/next slides.
Made by Karlo Videk
April 27, 2016

HTML, CSS and JavaScript full page slider.
Made by Joseph Martucci
February 28, 2016

Full slider prototype with HTML, CSS and JavaScript.
Made by Gluber Sampaio
January 6, 2016

A fullscreen, sort of responsive, slideshow animated with Greensocks TweenLite/Tweenmax.
Made by Arden
December 12, 2015

Full-Screen slider (GSAP Timeline) #1 with HTML, CSS and JavaScript.
Made by Diaco M.Lotfollahi
November 23, 2015

HTML and CSS slider with custom effects.
Made by Nikolay Talanov
November 12, 2015

Fullscreen drag-slider with parallax with HTML, CSS and JavaScript.
Made by Nikolay Talanov
November 12, 2015

Proof of concept rotating slider. Uses clip-path and lots of math.
Made by Tyler Johnson
April 16, 2015

A simple fullscreen CSS & jQuery slider using translateX and translate3d smoothness!
Made by Joseph
August 19, 2014

Images opacity slider in HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

This example illustrates how to create layout of slides stacked on each other (especially useful for fade in/out transitions). It"s achieved without setting their height and avoiding position: absolute; so they are fully flexible and easy to keep in normal page flow.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Animated responsive slider in HTML, CSS and JavaScript.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: animate.css

CSS only slider with masked text.

Compatible browsers: Chrome, Edge (partial), Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Image and content with parallax effect.

CSS only slide gallery.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Pure HTML/CSS slider with circular SVG progress bar.

Compatible browsers: Chrome, Edge (partial), Firefox (partial), Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

An experiment to create a completely responsive vertical slider with thumbnails using only CSS, and retaining the aspect ratio of the images.

A simple Flexbox image slider/carousel made with vanilla JavaScript.

This is an experiment that simulates a motion blur effect every time a slide is switched. It takes advantage of SVG Gaussian Blur filter and some CSS keyframes animation. Although the effect does not require any Javascript to properly work, in this example Javascript is only used for the slider functionality.

Cool animates slider with JS.

This is an experiment on how SVG patterns can help us create masked-like images for a CSS-only image slider.

Exploring some slider transitions. Swiper slider with parallax option enabled. Playing with CSS filters mostly here.
Made by Mirko Zorić
June 12, 2017

Simple GSAP slider with some subtle tween animations.
Made by Goran Vrban
June 9, 2017

Slider UI with HTML, CSS and JavaScript.
Made by Mergim Ujkani
June 6, 2017

Slider GSAP virsion 2.
Made by Em An
May 4, 2017

A little slicey transition slider using a simple add class deal. Have to smooth out the timings a bit and decide on the best approach for mobile (just stack, add touch events, make images full viewport, etc. Supports scrollwheel (scroll jacking), nav buttons and arrow keys. Can also increase the content wrapper to make the images fill viewport in their non animating state, which is kinda cool as well.
Made by Stephen Scaff
January 3, 2017

Leveraged CSS border-image & clip-path to create a slider animation effect.
Made by Emily Hayman
December 31, 2016

Little slider built with flexbox. Somewhat responsive, and can have fixed elements alongside the slider area.
Made by Robert
November 28, 2016

HTML, CSS canvas slider.
Made by Nvagelis
October 29, 2016

HTML, CSS and JavaScript 3D smooth slider.
Made by Eduardo Allegrini
October 19, 2016

HTML and CSS cupcake slider with sprinkles!
Made by Jamie Coulter
October 14, 2016

Made by mario s maselli
October 12, 2016

Exploring UI animation #2 with HTML, CSS and JavaScript.
Made by mario s maselli
September 22, 2016

Exploring UI animation #3 with HTML, CSS and JavaScript.
Made by mario s maselli
September 22, 2016

Ecommerce Slider v2.0 with HTML, CSS and JavaScript.
Made by Pedro Castro
September 17, 2016

HTML, CSS and JavaScript clean slider with curved background.
Made by Ruslan Pivovarov
September 13, 2016

Exploring UI animation #1 with HTML, CSS and JavaScript.
Made by mario s maselli
September 8, 2016

Enjoy the power of CSS: Up & down each middle image and paginated slider with lightbox.
Made by Kseso
August 15, 2016

Double exposure is photographic technique that combines 2 different images into a single image.
Made by Misaki Nakano
August 3, 2016

Slider using CSS3 property clip.
Made by Pedro Castro
May 1, 2016

Responsive CSS slider.
Made by geekwen
April 19, 2016

This is a simple slider experiment displaying words with beautiful meanings which cannot be directly translated. Focus: elegant typography and simple yet alluring transitions.
Made by Joe Harry
April 5, 2016

The animation idea is to change the value of CSS clip path, thus make a masking effect.
Made by Bhakti Al Akbar
March 31, 2016

Dot slider with HTML, CSS and JavaScript.
Made by Derek Nguyen
March 16, 2016

Prism effect slider with HTML, CSS and JavaScript.
Made by victor
March 12, 2016

Sliding background gallery with HTML, CSS and JavaScript.
Made by Ron Gierlach
November 30, 2015

HTML, CSS and JavaScript slider solution.
Made by Jürgen Genser
September 30, 2015

A product slider powered by Sequence.js. Sequence.js - The responsive CSS animation framework for creating unique sliders, presentations, banners, and other step-based applications.
Made by Ian Lunn
September 15, 2015

Tiny circle customized slider.
Made by Bram de Haan
August 11, 2015

Responsive GTA V slider with HTML, CSS and JavaScript.
Made by Eduard Mayer
January 24, 2014

It’s like a slider but it rotates cubeishly for reasons unknown.
Made by Eric Brewer
December 4, 2013

Made by Hugo DarbyBrown
August 28, 2013

Image overlay slider with HTML, CSS and vanilla JavaScript.
Made by Yugam
June 7, 2017

HTML and CSS featured image slider.
Made by Joshua Hibbert
June 16, 2016

Multi axis image slider with HTML, CSS and JavaScript.
Made by Burak Can
July 22, 2013

Cube slider, a small experiment with HTML5/CSS3 3d transforms.
Made by Ilya K.
June 26, 2013