Слайдер на 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, мы можем использовать обобщенный соседский селектор (~) для переключения слайдера.
Это вся функциональная часть CSS, остальное служит лишь для украшения и анимации.
Создано Йэном Ханссоном (@teapoted), февраль 2012.
P.S. Это тоже может быть интересно:
Мне как новичку оч понравилось))даже есть где применить,спасибо сайту..
XSS?
В IE8 не работает вообще.
Отличный слайдер. Йэн Хансон умняшка. Жаль только, что его не применишь, все равно придется для ослов js подключать(ну и для iOS), хотя такой минимализм радует.
З.Ы.: У него есть ещё одна приятная фишка — Style Sheet Swap в статьи не помешало бы.
Все бы хорошо, да только слайдер расчитан от 1 до 5 слайдов, начинаешь делать больше 6-7 и т д, и придется каждый раз % в блоке #slides article{width} подгонять, т.к 20 % работает для 5 => 100 / 20 = 5. Лично у меня не вышло, если есть решение напишите плз, спасибо!
На мой взгляд, именно в таких моментах проявляется ограниченность таких вот CSS-решений. Всё-таки CSS пока не стал полноценным инструментом для реализации сложной функциональности, его роль была и остается вспомогательной — украшать, добавлять мелкие «изюминки», а также подстраивать интерфейс под возможности пользователя (последний пункт в сабже как раз присутствует). Чаще всего такие вещи — либо демонстрация технологии («proof-of-concept»), либо что-то вроде спорта или искусства, «смотрите, как я могу, и не пытайтесь повторить это дома», а не практическое решение. В крайнем случае такая вещь, как в примере, может стать «дизайнерской фишкой» (напр. оригинальным представлением двухуровневого меню с точно известным числом главных пунктов) для «продвинутой» аудитории. Для произвольного контента, особенно добавляемого через CMS, скриптовые слайдеры пока подходят гораздо лучше.
Вообще лично я очень настороженно отношусь к использованию чекбоксов/радиокнопок с единственной целью «лишь бы не юзать скрипт». На мой взгляд, постоянное захламление разметки input-ами, не передающими никому никакой информации, едва ли лучше однократной загрузки «ненавязчивого» скрипта, а возможности
:checked + что-то(:checked ~ что-то) всё равно слишком ограничены по сравнению с возможностями скриптов. Но, как всегда, надо смотреть по задаче…Как скачать слайдер? выложите плиз код хтмл+цсс архивом?!!!!!
Добавлена ссылка для скачивания архива в конце статьи.
Ой!! Не увидел простите!!! Спасибо за столь быструю реакцию!! Добавляю Ваш ресурс в избранное!
Интересное решение, сохраню архивчик
А как сделать чтобы изображения менялись автоматически?
Можно с помощью CSS-анимаций с разными задержками, примерно как здесь. Но это недостаточно гибко, для практики старые добрые скрипты пока надежнее.
А вы попробуйте. Единственное, что здесь анимируется — это подложка, на которой лежат слайды, она двигается в соответствующую сторону (через margin-left). А в примере, который указали вы, анимация применяется к каждому слайду отдельно. Я пытался и не смог, поэтому, пока это лишь игрушка, скрипты действительно надежнее.
Как вариант, можно применить гибридный подход: зарезервировать несколько классов, отличающихся начальным смещением подложки (типа .showslide1, .showslide2, …), менять эти классы скриптом по таймеру, но саму анимацию оставить в CSS.
Ох, нет, именно так и делал — в safari 5.1.7 попался такой глюк, что анимация работает только 1 цикл, заказчик потребовал переделывать, а я потратил кучу времени, чтобы исправить глюк — не получилось, в итоге выбросил этот скрипт, переделал под jquery slick
Прошу прощения, когда писал «анимации», думал о transitions). Но всё равно, неужели кто-то еще пользуется таким антиквариатом, как Safari 5.1.7? Или это последний Safari, доступный для Windows (что само по себе не чистый тест — на маке чуть иначе рендерятся шрифты и т.п.)? По-моему, Safari ниже 7 в реальном мире уже не встречаются (маководы уже массово переходят на 9-й…), и ориентироваться на баги музейных версий уже нет смысла.
А можно сделать так чтобы листать мышкой можно было?