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

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

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

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

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

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

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

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

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

< div class = "untitled" > < div class = "untitled__slides" > . . . < / div > < / div >

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

< div class = "untitled__slide" > < div class = "untitled__slideBg" > < / div > < div class = "untitled__slideContent" > < span > London < / span > < span > Scout < / span > < a class = "button" href = "https://unsplash.com/@scoutthecity" target = "/black" > Unsplash Profile < / a >

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

Разметка HTML

Разметка HTML очень простая. В примере имеется четыре слайда. Каждый из них состоит из изображения (как фон) и текста описания в элементе div . Дополнительные слайды вставить очень просто.

CSS

Для слайдера используются анимации CSS3 anim_slides и anim_titles . Первая применяется для отдельных слайдов, вторая - для текста описания. Для описания также изменяется положение и прозрачность.

/* Слайдер */ .slides { height:300px; margin:50px auto; overflow:hidden; position:relative; width:900px; } .slides ul { list-style:none; position:relative; } /* Кадры анимации #anim_slides */ @-webkit-keyframes anim_slides { 0% { opacity:0; } 6% { opacity:1; } 24% { opacity:1; } 30% { opacity:0; } 100% { opacity:0; } } @-moz-keyframes anim_slides { 0% { opacity:0; } 6% { opacity:1; } 24% { opacity:1; } 30% { opacity:0; } 100% { opacity:0; } } .slides ul li { opacity:0; position:absolute; top:0; /* анимация css3 */ -webkit-animation-name: anim_slides; -webkit-animation-duration: 24.0s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; -moz-animation-name: anim_slides; -moz-animation-duration: 24.0s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; } /* Задержки css3 */ .slides ul li:nth-child(2), .slides ul li:nth-child(2) div { -webkit-animation-delay: 6.0s; -moz-animation-delay: 6.0s; } .slides ul li:nth-child(3), .slides ul li:nth-child(3) div { -webkit-animation-delay: 12.0s; -moz-animation-delay: 12.0s; } .slides ul li:nth-child(4), .slides ul li:nth-child(4) div { -webkit-animation-delay: 18.0s; -moz-animation-delay: 18.0s; } .slides ul li img { display:block; } /* Кадры анимации #anim_titles */ @-webkit-keyframes anim_titles { 0% { left:100%; opacity:0; } 5% { left:10%; opacity:1; } 20% { left:10%; opacity:1; } 25% { left:100%; opacity:0; } 100% { left:100%; opacity:0; } } @-moz-keyframes anim_titles { 0% { left:100%; opacity:0; } 5% { left:10%; opacity:1; } 20% { left:10%; opacity:1; } 25% { left:100%; opacity:0; } 100% { left:100%; opacity:0; } } .slides ul li div { background-color:#000000; border-radius:10px 10px 10px 10px; box-shadow:0 0 5px #FFFFFF inset; color:#FFFFFF; font-size:26px; left:10%; margin:0 auto; padding:20px; position:absolute; top:50%; width:200px; /* Анимация css3 */ -webkit-animation-name: anim_titles; -webkit-animation-duration: 24.0s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; -moz-animation-name: anim_titles; -moz-animation-duration: 24.0s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; }

3 марта 2015 в 18:15

Интересный и одновременно простой слайдер на чистом CSS3

• Разработка веб-сайтов ,
• CSS ,
• HTML

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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