Слайдер на CSS3 (без JS*), подстраивающийся под разрешение

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

В общем что говорить, это нужно увидеть!

Слайдер на CSS3 (без JS*), подстраивающийся под разрешение

Создан Йэном Ханссоном (@teapoted)

Рисунки Брендана Забараускаса (@bjzaba_).

Иконки из набора iconSweets.

Поддержка браузеров:

Лучшая по тестам: Firefox (производительность плавных переходов)
Полная поддержка: Chrome, Firefox, Opera, Safari (последние версии)
Частичная поддержка: IE9 (работает, но не поддерживает плавные переходы)

*JS не нужен для функциональности самого слайдера, но есть 1 фикс для совместимости с его использованием

Устройства на iOS не обрабатывают label-ы как надо. В смысле когда кликаешь на label, он должен активировать объект, на который указывает его атрибут for. Я добавил яваскриптовый фикс для этого. Я мог бы переделать всё решение с использованием :target вместо :checked, что тоже должно было бы «починить» проблему, но это значило бы, что я мог бы использовать лишь 1 слайдер на странице. Я еще покопаюсь с этим.

Страничку без JS-фикса для iOS можно посмотреть здесь.

Как это работает?

Слайдер во многом похож на все JS-слайдеры. Его контентные области (статьи) «плавают» рядом друг с другом. Излишки скрываются с помощью overflow. Потом мы можем анимировать margin внутреннего дива, так, если у нас 5 статей, левый маргин -100% покажет нам вторую статью.

Чтобы сохранить наш выбор, мы используем радиокнопки. Как отмечено выше, можно использовать :target и ссылки с якорями, но это не дает полной замены яваскрипту, т.к. можно обработать лишь одно действие за раз, клики запоминаются в истории браузера и загаживают ее (кнопка «назад» браузера будет долго перематывать слайдер обратно), к тому же такое уже делали раньше.

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

 #slide1:checked ~ #slides .inner { margin-left:0; }
 #slide2:checked ~ #slides .inner { margin-left:-100%; }
 #slide3:checked ~ #slides .inner { margin-left:-200%; }
 #slide4:checked ~ #slides .inner { margin-left:-300%; }
 #slide5:checked ~ #slides .inner { margin-left:-400%; }

Это вся функциональная часть CSS, остальное служит лишь для украшения и анимации.

Создано Йэном Ханссоном (@teapoted), февраль 2012.

Ссылка на оригинал

P.S. Это тоже может быть интересно:

16 Комментарии

  1. Ромка

    Мне как новичку оч понравилось))даже есть где применить,спасибо сайту..

  2. alert(123);

    XSS?

  3. Светлана

    В IE8 не работает вообще.

  4. xchesh

    Отличный слайдер. Йэн Хансон умняшка. Жаль только, что его не применишь, все равно придется для ослов js подключать(ну и для iOS), хотя такой минимализм радует.

    З.Ы.: У него есть ещё одна приятная фишка — Style Sheet Swap в статьи не помешало бы.

  5. Михаил

    Все бы хорошо, да только слайдер расчитан от 1 до 5 слайдов, начинаешь делать больше 6-7 и т д, и придется каждый раз % в блоке #slides article{width} подгонять, т.к 20 % работает для 5 => 100 / 20 = 5. Лично у меня не вышло, если есть решение напишите плз, спасибо!

    1. SelenIT

      На мой взгляд, именно в таких моментах проявляется ограниченность таких вот CSS-решений. Всё-таки CSS пока не стал полноценным инструментом для реализации сложной функциональности, его роль была и остается вспомогательной — украшать, добавлять мелкие «изюминки», а также подстраивать интерфейс под возможности пользователя (последний пункт в сабже как раз присутствует). Чаще всего такие вещи — либо демонстрация технологии («proof-of-concept»), либо что-то вроде спорта или искусства, «смотрите, как я могу, и не пытайтесь повторить это дома», а не практическое решение. В крайнем случае такая вещь, как в примере, может стать «дизайнерской фишкой» (напр. оригинальным представлением двухуровневого меню с точно известным числом главных пунктов) для «продвинутой» аудитории. Для произвольного контента, особенно добавляемого через CMS, скриптовые слайдеры пока подходят гораздо лучше.

      Вообще лично я очень настороженно отношусь к использованию чекбоксов/радиокнопок с единственной целью «лишь бы не юзать скрипт». На мой взгляд, постоянное захламление разметки input-ами, не передающими никому никакой информации, едва ли лучше однократной загрузки «ненавязчивого» скрипта, а возможности :checked + что-то (:checked ~ что-то) всё равно слишком ограничены по сравнению с возможностями скриптов. Но, как всегда, надо смотреть по задаче…

  6. Владимир

    Как скачать слайдер? выложите плиз код хтмл+цсс архивом?!!!!!

    1. Administrator

      Добавлена ссылка для скачивания архива в конце статьи.

      1. Владимир

        Ой!! Не увидел простите!!! Спасибо за столь быструю реакцию!! Добавляю Ваш ресурс в избранное!

  7. Игорь

    Интересное решение, сохраню архивчик

  8. Andrew

    А как сделать чтобы изображения менялись автоматически?

    1. SelenIT

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

      1. Андрей

        А вы попробуйте. Единственное, что здесь анимируется — это подложка, на которой лежат слайды, она двигается в соответствующую сторону (через margin-left). А в примере, который указали вы, анимация применяется к каждому слайду отдельно. Я пытался и не смог, поэтому, пока это лишь игрушка, скрипты действительно надежнее.

        1. SelenIT

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

          1. Андрей

            Ох, нет, именно так и делал — в safari 5.1.7 попался такой глюк, что анимация работает только 1 цикл, заказчик потребовал переделывать, а я потратил кучу времени, чтобы исправить глюк — не получилось, в итоге выбросил этот скрипт, переделал под jquery slick

            1. SelenIT

              Прошу прощения, когда писал «анимации», думал о transitions). Но всё равно, неужели кто-то еще пользуется таким антиквариатом, как Safari 5.1.7? Или это последний Safari, доступный для Windows (что само по себе не чистый тест — на маке чуть иначе рендерятся шрифты и т.п.)? По-моему, Safari ниже 7 в реальном мире уже не встречаются (маководы уже массово переходят на 9-й…), и ориентироваться на баги музейных версий уже нет смысла.

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

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