Адаптивный слайдер без Javascript на CSS3

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

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

1. CSS3 слайдер изображений

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

2. CSS3 слайдер изображений с миниатюрами

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

3. Галерея на CSS

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

4. Слайдер на CSS без ссылок

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

5. Адаптивный слайдер на CSS3

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

*** БОНУСНЫЙ СЛАЙДЕР ***

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

Вывод

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

Работая над книгой о 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 у вас должен получиться в итоге.

18.05.15 48.9K

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

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

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

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

JQuery-слайдеры изображений

Jssor Responsive Slider

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

  • Адаптивный дизайн;
  • Более 15 параметров настройки;
  • Более 15 эффектов смены изображения;
  • Галерея изображений, карусели, поддержка полноэкранного размера;
  • Вертикальный ротатор баннеров, список слайдов;
  • Поддержка видео.

Демо | Скачать

PgwSlider — адаптивный слайдер на основе JQuery / Zepto

Единственной задачей данного плагина является демонстрация слайдов изображений. Он очень компактный, так как размер JQuery-файлов составляет всего 2,5 КБ, что позволяет подгружать его действительно быстро:

  • Адаптивный макет;
  • SEO-оптимизация;
  • Поддержка разными браузерами;
  • Простые переходы изображений;
  • Размер архива всего 2,5 КБ.

Демо | Скачать

Jquery Vertical News Slider

Гибкий и полезный JQuery -слайдер, предназначенный для новостных ресурсов с перечнем публикаций с левой стороны и выводом изображения справа:

  • Адаптивный дизайн;
  • Вертикальная колонка переключения новостей;
  • Расширенные заголовки.

Демо | Скачать

Wallop Slider

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

  • Адаптивный макет;
  • Простой дизайн;
  • Различные варианты смены слайдов;
  • Минимальный код JavaScript ;
  • Размер всего 3KБ.

Демо | Скачать

Flat-style Polaroid gallery

Галерея в стиле разбросанных на столе документов с гибким макетом и красивым дизайном должна заинтересовать многих из вас. Больше подходит для планшетов и больших дисплеев:

Демо | Скачать

HiSlider – HTML5, jQuery и WordPress слайдер изображений

HiSlider представил новый бесплатный плагин JQuery-слайдера , с помощью которого можно создавать разнообразные галереи изображений с фантастическим переходами:

  • Адаптивный слайдер;
  • Не требует знания программирования;
  • Несколько удивительных шаблонов и скинов;
  • Красивые эффекты переходов;
  • Поддержка разных платформ;
  • Совместимость с WordPress, Joomla, Drupal;
  • Возможность отображения контента разных типов: изображений, видео YouTube и видео Vimeo;
  • Гибкая настройка;
  • Полезные дополнительные функции;
  • Неограниченный объем отображаемого контента.

Демо |Скачать

Wow Slider

WOW Slider — это адаптивный JQuery-слайдер изображений с удивительными визуальными эффектами (домино, поворот, размытие, переворот и вспышка, вылет, жалюзи ) и профессиональными шаблонами.

WOW Slider поставляется вместе с мастером установки, что позволяет создавать фантастические слайдеры за считанные секунды без необходимости разбираться в коде и редактировать изображения. Также доступны для скачивания версии плагина под Joomla и WordPress :

  • Полностью адаптивный;
  • Поддержка всех браузеров и всех типов устройств;
  • Поддержка сенсорных устройств;
  • Простая установка на WordPress ;
  • Гибкость в настройке;
  • SEO -оптимизированный.

Демо |Скачать

Nivo Slider – бесплатный jQuery-плагин

Nivo Slider известен всему миру как самый красивый и простой в использовании слайдер изображений. Плагин Nivo Slider является бесплатным и выпускается по лицензии MIT :

  • Требуется JQuery 1.7 и выше;
  • Красивые эффекты перехода;
  • Простой и гибкий в настройке;
  • Компактный и адаптивный;
  • Открытый код;
  • Мощный и простой;
  • Несколько различных шаблонов;
  • Автоматическая обрезка изображения.

Демо |Скачать

Простой JQuery слайдер с технической документацией

Идея была навеяна слайдерами от Apple , в которых несколько маленьких элементов могут вылетать с различными эффектами анимации. Разработчики попытались воплотить эту концепцию с учетом минимальных требований для создания простого дизайна интернет-магазина, в котором «вылетающие » элементы представляют собой различные категории:

  • Адаптивный макет;
  • Минималистичный дизайн;
  • Различные эффекты выпадения и смены слайдов.

Демо |Скачать

Полноразмерный JQuery-слайдер изображений

Очень простой слайдер, занимающий 100% ширины страницы и подстраивающийся под размеры экранов мобильных устройств. Он работает с CSS переходами, а изображения «укладываются» вместе с анкорами. Анкор может быть заменен или удален, если вы не хотите привязывать к изображению ссылку.

При установке слайдер разворачивается на 100% ширины экрана. Также он может автоматически уменьшает размер изображений слайдов:

  • Адаптивный JQuery -слайдер;
  • Полноразмерный;
  • Минималистичный дизайн.

Демо |Скачать

Elastic Content Slider + пособие

Elastic Content Slider автоматически регулирует ширину и высоту в зависимости от размеров родительского элемента. Это простой JQuery-слайдер . Он состоит из слайд-зоны вверху, и панели навигационных вкладок в нижней части. Слайдер подстраивает свою ширину и высоту в соответствии с размерами родительского контейнера.

При просмотре на маленьких по диагонали экранах вкладки навигации превращаются в маленькие иконки:

  • Адаптивный дизайн;
  • Прокрутка кликом мыши.

Демо |Скачать

Free 3D Stack Slider

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

  • Адаптивный дизайн;
  • Flip -переход;
  • 3D -эффекты.

Демо |Скачать

Fullscreen Slit Slider на основе JQuery и CSS3 + руководство

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

  • Адаптивный дизайн;
  • Сплит-переход;
  • Полноэкранный слайдер.

Демо |Скачать

Unislider – очень маленький JQuery-слайдер

Никаких ненужных наворотов и разметки, размер менее 3КБ. Используйте любой HTML-код для своих слайдов, расширяйте его с помощью CSS . Все, что связано с Unslider , размещается на GitHub :

  • Поддержка различными браузерами;
  • Поддержка клавиатуры;
  • Регулировка по высоте;
  • Адаптивный дизайн;
  • Поддержка сенсорного ввода.

Демо | Скачать

Minimal Responsive Slides

Простой и компактный плагин (размер всего 1 Кб ), который создает адаптивный слайдер, используя элементы внутри контейнера. ResponsiveSLides.js работает с большим количеством браузеров, включая все версии IE от IE6 и выше:

  • Полностью адаптивный;
  • Размер 1 КБ;
  • CSS3 переходы с возможностью запуска через JavaScript ;
  • Простая разметка с использованием маркированного списка;
  • Возможность настройки эффектов переходов и длительности просмотра одного слайда;
  • Поддерживает возможность создания нескольких слайд-шоу;
  • Автоматическая и ручная прокрутка.

Демо |Скачать

Camera — бесплатный JQuery слайдер

Camera — плагин с множеством эффектов переходов, адаптивным макетом. Прост в настройке, поддерживается мобильными устройствами:

  • Полностью адаптивный дизайн;
  • Подписи;
  • Возможность добавления видео;
  • 33 различных цвета иконок.

Демо |Качать

SlidesJS, адаптивный JQuery плагин

SlidesJS — это адаптивный плагин для JQuery (1.7.1 и выше ) с поддержкой сенсорных устройств и CSS3-переходов . Поэкспериментируйте с ним, попробуйте несколько готовых примеров, которые помогут вам разобраться, как добавить SlidesJS в свой проект:

  • Адаптивный дизайн;
  • CSS3 -переходы;
  • Поддержка сенсорных устройств;
  • Прост в настройке.

Демо | Скачать

BX Jquery Slider

Это бесплатный адаптивный JQuery слайдер:

  • Полностью адаптивный — подстраивается под любое устройство;
  • Горизонтальная, вертикальная смена слайдов;
  • Слайды могут содержать изображения, видео или HTML -контент;
  • Расширенная поддержка сенсорных устройств;
  • Использование CSS -переходов для слайд-анимации (аппаратное ускорение );
  • API обратных вызовов и полностью публичные методы;
  • Небольшой размер файла;
  • Прост в реализации.

Демо |Скачать

FlexSlider 2

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

Демо | Скачать

Galleria — адаптивная фотогалерея на основе JavaScript

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

  • Полностью бесплатный;
  • Режим полноэкранного просмотра;
  • 100% адаптивный;
  • Не требуется опыта программирования;
  • Поддержка iPhone , IPad и других сенсорных устройств;
  • Flickr , Vimeo , YouTube и многое другое;
  • Несколько тем.

Демо | Скачать

Blueberry — простой адаптивный JQuery-слайдер изображений

Представляю вам JQuery-слайдер изображений, написанный специально для адаптивного веб-дизайна. Blueberry — это экспериментальный плагин слайдера изображений с открытым исходным кодом, который был написан специально для работы с адаптивными шаблонами:

  • Минимальный дизайн;
  • Адаптивный макет;
  • Презентации.

Демо | Скачать

JQuery Popeye 2.1

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

  • Адаптивный дизайн;
  • Поддержка подписей;
  • Режим слайд-шоу.

Демо | Скачать

FractionSlider- бесплатный плагин JQuery слайдера с эффектом параллакса

Попробуйте этот удивительный плагин. Анимация нескольких элементов при выводе изображений с настройкой каждого из них. FractionSlider — это JQuery-плагин для изображений или текста. Он позволяет анимировать сразу несколько элементов слайда. Вы можете установить различные методы анимации, такие как смена кадров или переход в определенном направлении:

  • Адаптивный дизайн;
  • Анимация элементов;
  • Управление настройками анимации;
  • Фоновая анимация.

Демо |Скачать

Free Responsive Image Slider с руководством

С помощью FlexSlider мы можем составить код слайдера с «импрессионистским » интерфейсом. Плагин позволяет добавлять функционал и стили через CSS3 . Я надеюсь, он вам понравится, и вы используете его в своих проектах. Давайте перечислим его функции:

  • Адаптивный дизайн;
  • Fade эффекты;
  • Стрелки влево, вправо;
  • Зеленые кнопки.

Демо |Скачать

Sequence — бесплатный плагин с функцией CSS3-переходов

Поставляется с четырьмя темами, и только самые навороченные из них, такие как слайдер в стиле Аpple и слайдер с горизонтальным параллаксом не являются адаптивными:

  • Три бесплатных темы;
  • Раздвижной горизонтальный параллакс;
  • Стиль Apple ;
  • Адаптивные темы;
  • Поддержка сенсорных устройств;
  • Простая модификация;
  • Поддержка разными браузерами.

    • Хорошо Плохо

    Приветствую вас вновь на моем блоге. Сегодня в css благодаря новым селекторам появилась возможность делать слайдер без скриптов. Итак, в этой статье я покажу вам, как сделать адаптивный слайдер на css3?

    План урока

    Итак, сегодня я очень подробно покажу вам, как создать свой слайдер без скриптов, адаптировать его под любые устройства и легко менять в будущем его внешний вид, а также добавлять новые слайды. Мы сделаем всего 3 слайда, которые будут переключаться вручную при клике на кнопки. Что ж, приступим!

    Разметка слайдера

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

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

    Последний кусок кода, который нам нужен. Он выводит подписи к кнопкам, но на самом деле мы используем их для того, чтобы скрыть кнопки по умолчанию (радио кнопки не оформляются через стили) и вместо них поставить эти блоки-подписи, которые можно оформить. Именно они и будут служить кнопками-переключателями, а связка с radio-кнопками делается через специальный атрибут for .

    А теперь весь этот код нужно обернуть в один общий контейнер. Пусть это будет блок с классом wrap .

    Начинаем создавать слайдер — первоначальные стили для страницы

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

    * { margin: 0; padding: 0; box-sizing: border-box; }

    К слову, * — означает все селекторы. То есть такой универсальный и глобальный селектор.

    Оформляем контейнер. Именно сам блок, который содержит в себе все 3 наши важные части — кнопки, слайды и подписи.

    Ширину и высоту вы можете выставлять ЛЮБУЮ , в зависимости от того, каких размеров будут ваши фотографии для слайдов. Я заранее обрезал фотографии до размеров 600 на 350 пикселей, поэтому и указываю такие размеры. margin: 0 auto выравняет контейнер ровно по центру страницы, а относительное позиционирование позволит точно разместить кнопки в самом контейнере позднее.

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

    Вначале вот такие стили:

    Slider { background-color: #999; height: inherit; overflow: hidden; position: relative; width: inherit; }

    Укажем слайдеру такие же ширину и высоту, как и общему контейнеру. Также указываем цвет и позиционирование, а свойство overflow: hidden обрезает все, что не попадает в блок.

    Следующим делом нужно оформить сами слайды:

    Slides { height: inherit; opacity: 0; position: absolute; width: inherit; z-index: 0; } .auto1 { background-image: url(bmw.jpg); } .auto2 { background-image: url(audi.jpg); } .auto3 { background-image: url(porshe.jpg); }

    Также указываем ширину и высоту как и у слайда. Значение inherit позволяет наследовать значение родительского блока. С помощью свойств z-index и opacity мы сделаем наши картинки невидимыми. Ниже мы четко прописываем фоновые изображения.

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

    Оформляем кнопки переключатели

    Теперь нужно убрать стандартные радио-кнопки и вместо них стилизовать подписи.

    Wrap > input { display: none; }

    Убираем радио-кнопки.

    Wrap .control { position: absolute; margin-left: -50px; left: 50%; }

    С помощью этих стилей мы отцентрируем блок с кнопками по центру.

    Wrap label { cursor: pointer; display: inline-block; height: 25px; margin: 10px; position: relative; width: 25px; border: 2px solid grey; border-radius: 30%/10px; }

    Эти стили делают очень важное дело — они позволяют нам оформить кнопки. Нужно задать размеры кнопок, установить для них блочно-строчный тип, отступы и серую рамку. Еще можно добавить скругление углов.

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

    Поскольку мы с вами переключаем изображения автомобилей, я нашел в сети иконку руля, уменьшил ее до размеров примерно 20 на 20. Теперь дело замалым — добавлять фоновое изображение кнопке, если на нее кликнули.

    #point1:checked ~ .control label:nth-of-type(1), #point2:checked ~ .control label:nth-of-type(2), #point3:checked ~ .control label:nth-of-type(3) { background: url(wheel.png) no-repeat 50% 50%; }

    Это делается с помощью таких селекторов. Что они делают? По сути, это сложный селектор, в нем записано целое условие. Это чем-то похоже на программирование. Он обозначает следующее: если радио-кнопка выбрана, то нужно применить стиль к подписи, которая идет где-то дальше в разметке. Теперь при клике на кнопки у них внутри появляется изображение руля!

    Самый важный этап — заставляем работать переключение!

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

    #point1:checked ~ .slider > .auto1, #point2:checked ~ .slider > .auto2, #point3:checked ~ .slider > .auto3 { opacity: 1; z-index: 1; }

    Что происходит? Сейчас, если вы попробуете слайдер в действии, он будет полностью рабочим. Этими селекторами мы указываем следующее: если нажата радио-кнопка, сделай видимым нужный слайд, который лежит где-то дальше в html-коде (дальше радио-кнопок).

    Таким образом, при клике на первую кнопку, нам показывается автомобиль BMW, при клике на вторую — Audi, при клике на третью — Porshe. А еще все это время при переключении иконка руля появляется в той кнопке, слайд для которой активен.

    Итак, мы сделали слайдер. Осталось его адаптировать.

    Адаптируем слайдер под просмотр на мобильных устройствах

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

    1. Для блока wrap , то есть главного контейнера, задать не width , а max-width: 600px . Это позволит контейнеру сжиматься, если окно становиться меньше по ширине.
    2. Слайдеру (slider) необходимо прописать width: 100%;
    3. У слайдов (slides) ничего не изменяем.

    Итого все изменения можно увидеть в этом коде:

    Wrap{ max-width: 600px; } .slider{ width: 100%; }

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

    Кстати, подробно о медиа-запросах и их применении я написал . Советую ознакомиться с ней тем, у кого нет никакого представления об адаптивном дизайне.

    Соответственно, чтобы на ширине 650 пикселей и меньше все отображалось хорошо, я предлагаю такое изменение стилей:

    @media screen and (max-width: 650px){ .wrap{ max-width: 480px; height: 280px; } .slides{ background-size: cover; } }

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

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

    Последняя точка — ширина примерно в 400 пикселей. На ней наша картинка опять начинает не помещаться и нужно предпринимать меры. Для этого напишу еще один медиа-запрос:

    @media screen and (max-width: 400px){ .wrap{ max-width: 320px; height: 180px; } .slides{ background-size: cover; } }

    Все то же самое, только вновь уменьшаем ширину и высоту контейнера. Отлично, теперь наш слайдер полностью адаптивный! Даже на мобильном телефоне с шириной 320 пикселей он будет смотреться отлично. Впрочем, смотрите сами:

    Благодаря медиа-запросам изображения пропорционально уменьшаются, сохраняя свои пропорции.

    Добавляем слайдеру эффекты при переходах

    Можно прописать слайдам какой-нить эффект при переходах (.slides), а при появлении изображения отменять действие эффекта. Чтобы увидеть результат, вам нужно обязательно задать слайдам свойство transition , чтобы переходы были плавными. Пример эффекта:

    Slides{ transform: rotate(50deg); transition: 1s; }

    Теперь достаточно селектору, который делает слайд видимым, прописать отмену трансформации:

    #point1:checked ~ .slider > .auto1{ transform: none; }

    И так сделать для всех слайдов. Соответственно, изначально изображение будет повернуто и будет невидимо, а при его появление будет возникать эффект плавного возвращения в исходное положение. Соответственно, вы можете придумать свои эффекты. Что ж, слайдер мы сделали, на этом у меня все. Если у вас есть вопросы, жду в комментариях.

    Как сделать так, чтобы при клике по слайду происходил переход по привязанной к слайду ссылке?

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

    Как видите, я вставил внутрь первого и второго слайда ссылки. Итак, при клике на первый слайд произойдет переход на Гугл, при клике на второй — на Яндекс. Хочу отметить, что ссылка будет открываться в этом же окне, то есть текущая страница со слайдером в таком случае исчезнет. Если вам нужно открывать ссылки со слайдов в новом окне, в каждый тег необходимо добавить атрибут target = "_blank".

    Но это не все, что нужно сделать! Сейчас еще ничего не работает, чтобы картинки стали кликабельны, нужно добавить в css вот что:

    Slides a{ display: block; width: 100%; height: 100%; }

    То есть для всех слайдов делаем ссылку блочным элементом, и указываем ей ширину и высоту 100%, чтобы она занимала все пространство картинки. Теперь все должно работать, можете проверить. Просто замените адреса в ссылках и можно пользоваться.

    Альтернативный css3 слайдер на анимационных эффектах

    Другой пример css3 слайдера. В этот раз мы сделаем его за счет анимации. В целом, это получится даже проще, чем первым способом.

    Создание слайдера с помощью keyframes

    Начать нужно с html-разметки. В этом случае она будет совсем простой, всего один блок с идентификатором:

    Для слайдов я подготовил 3 картинки одинаковых размеров. В моем случае получилось 448 пикселей в ширину и 251 в длину. Это размеры картинок. Я рекомендую вам, чтобы все размеры были одинаковы, тогда вообще никаких проблем с нашим слайдером не будет.

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

    У нас просто фоновая картинка в блоке, и больше ничего. Для простоты я сохранил картинки, которые использую в этом примере под названиями 1, 2 и 3.

    А вот теперь начинается самое интересное. Самое время прописать ту самую анимацию, которая заставит фоновое изображение изменяться. Это делается с помощью конструкции @keyframes .

    @keyframes slider{ 0%{ background: url(1.jpg);} 33%{ background: url(2.jpg);} 66%{ background: url(3.jpg);} }

    Давайте подробнее рассмотрим этот кусок кода. К слову, его нужно поместить в css-файл. После ключевого слова @keyframes идет имя анимации, оно может быть абсолютно любым, но в нем могут быть только латинские символы. Далее открываются фигурные скобки и уже в них записывается каждый отдельный анимационный эффект.

    Что же мы тут видим? Во-первых, сначала указывается временной отрезок в анимации, а потом в фигурных скобках пишутся свойства, которые должны применяться в этот момент. Мы как бы говорим браузеру, что в самом начале анимации фоном должно быть изображение 1.jpg , далее на трети выполнения анимации оно должно быть изменено на 2.jpg , ну и ближе к концу опять на другое изображение.

    Отлично, мы уже все прописали. Можете сохранить файл и обновить страницу, но ничего не изменится. Все потому, что вы всего лишь описали анимационные эффекты, но не связали их с нужным блоком. А я напомню, нам нужно связать написанный @keyframes с блоком #slider . Помните, мы ему прописывали стили, самое время добавить еще парочку. В частности, связка с анимацией происходит с помощью двух обязательных свойств:

    #slider{ animation-name: slider; animation-duration: 7s; }

    Это все сразу расставляет по своим местам! Во-первых, мы связываем анимацию slider с блоком. Во-вторых, указываем время ее выполнения. Теперь браузер понимает процентную запись и может в нужное время менять фон блока.

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

    Решается эта проблема очень просто — нужно добавить свойство, которое установит количество повторений анимации, как бесконечное. Вот оно:

    Animation-iteration-count: infinite;

    Как вы понимаете, вместо значения infinite может быть конкретное число повторов, которое вам нужно. Таким образом картинки будут меняться постоянно, а вы теперь можете сделать автоматический слайдер с картинками на чистом css. И хотя их нельзя переключать вручную, все равно этот прием может применяться в сайтостроении, поэтому очень полезно о нем знать. Что ж, это был альтернативный способ создать слайдер без скриптов.

    Как видите, в css смена картинок без вмешательства пользователя вполне возможна.

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

    Table of Contents

    Related Articles

    About the code

    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

    Comparison (Before/After) Sliders


    About the code

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


    About the code

    A before and after slider with only html and css.


    About the code

    Playing around with a new idea using my two layer before/after image slider. Keeping it minimal. Keeping it vanilla. Like it if it"s useful:)

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


    About the code

    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

    Fullscreen Sliders


    About the code

    Nice transition effect for fullscreen slider.


    About the code

    Horizontal parallax sliding slider with Swiper.js.


    About the code

    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

    1. Clip-path for image masking rectangle border (webkit only).
    2. Blend-mode for this mask.
    3. Smart color system, just put your color name and value into sass map and then add proper class with this color name to elements and everything will work!
    4. Cool credits side-menu (click small button in the center of demo).
    5. Vanilla js with just < 200 lines of code (basically it’s just adds/removes classes).
    Made by Nikolay Talanov
    October 7, 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

    Made by Arden
    December 5, 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

    Responsive Sliders


    About the code

    Image and content with parallax effect.


    About the code

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


    About the code

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


    About the code

    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.


    About the code

    Cool animates slider with JS.


    About the code

    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

    Simple Sliders

    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


    About the code

    Simple pure made with

    Feature slider with HTML, CSS and JavaScript.
    Made by Andy Lorimer
    October 23, 2015

    CSS only.
    Made by Alberto Hartzet
    May 6, 2015

    Features: - automatic slideshow - pause on hover - dynamic slide counter - show/hide controls on hover.
    Made by André Cortellini
    August 14, 2014

    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

  • Сергей Савенков

    какой то “куцый” обзор… как будто спешили куда то