Интересный и одновременно простой слайдер на чистом CSS3
Я никому не открою Америку, не удивлю публику новым фокусом и не взорву мозг тем, кто в 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
Общий блок и блок с слайдером имеют одинаковые размеры, чтобы идеально контролировать положение слайдера на странице. Пока отсутствуют слайды, слайдер мы временно покрасили в светло-серый цвет.
.wrapper > input
Радио-кнопки скрываем. Они нам понадобятся позже.
Результат на данный момент такой:
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
Навигацию мы делаем классической. Каждая кнопка представляет собой область в виде круга, внутри которого при активном слайде пустая область частично окрасится. Пока же у нас следующий результат:
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)
В оформленные кнопки навигации добавляем плавное окрашивание внутри них. Также добавляем условия, при которых активная кнопка и кнопка, на которую навели курсор, будет плавно окрашиваться. Наши собственные радио-кнопки готовы:
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
В общие стили слайдов мы добавляем свойства, при которых все слайды становятся невидимыми и уходят на задний план. Также мы добавили небольшое увеличение слайдов, пока они невидимы для придания интересного появления в слайдере.
Далее мы приписываем условие, при котором, в зависимости от активной кнопки навигации, в окне слайдера появлялся необходимый слайд.
Результат можно посмотреть здесь: демка слайдера.
Итог
Слайдер не требует js. Пускай он не умеет сам переключаться, но любому, кто знает основы CSS, transition и transform, будет легко придумать свои эффекты для переключения слайдов.
P.S. За основу взят слайдер от «Sorax», который я переделал на свой лад.
Как сделать примитивный слайдер
Привет! Сегодня я научу вас делать примитивный слайдер. Сначала давайте определимся, что я имею ввиду:
- HTML и CSS
- Выглядит как слайдер, но не имеет полного функционала
- Работает как слайдер
В первую очередь создадим скелет нашего слайдера. Для этого нам понадобится контейнер, обертка и корпус:
Еще нам нужны карточки, я возьму свои из первого проекта по верстке.
Дальше идея простая, сделаем «прорезь» в контейнере по размеру одной карточки и ограничим зону видимости с помощью overflow: hidden. Потом магический удар по клавиатуре, и:
&::-webkit-scrollbar < display: none; >>
Не бойтесь, это просто SCSS и мы визуально убираем ползунок у нашей обертки.
На данный момент, если вы верстаете, параллельно на экране будет просто одна из пяти карточек, и, в принципе, можете проверить через инструменты разработчика, реагирует ли слайдер реагирует на перетаскивание. Если да, то поздравляю, вы прекрасны. (Чтобы убрать данное поведение просто изменим стили .wrapper < overflow: hidden; >)
Ну а теперь давайте добавим элементы управления. В нашу верстку вносим:
Таких у нас будет столько же, сколько и элементов. В моем случае пять. А теперь внимательно — в этом месте можно и запутаться: важно, что бы все input были с одинаковым атрибутом name, чтобы реализовать правильное поведение радиокнопок(type=»radio»), атрибут checked мы выставляем для того, чтобы сразу подсветить кнопку. То есть из пяти input атрибут checked должен быть только у одного, в нашем случае он будет у первого.
Вы резонно спросите, а зачем нам нужно указывать для них id? Вот тут на самом деле все зависит от вас, можно и без них. Но мы-то люди не жадные и устроим парад кнопочек-тыкалочек.
Теперь добавим к нашему прикольному макету контроллер:
| div.wrapper | div.slider | | div.controls
А внутрь мы добавим:
Наверное вы уже догадались, столько же сколько и input, а в атрибуте for укажем id необходимого нам input. Теперь через css немножко украсим label
Попробуйте теперь покликать по контроллерам(label) и увидите, что они переключают радиокнопки сверху, я считаю, что это уже вау. Но зачем нам вообще видеть и кнопки, и контроллер? Уберем радиокнопки, сделаем их display: none, и отредактируем поведение label, сейчас внимательно:
> Если все понятно в коде выше, пропускай абзац.
Не знакомым с SCSS может быть непонятно, что происходит. Не беспокойтесь, это просто цикл for. Фактически мы выбираем радиокнопку по id, проверяем, имеет ли она атрибут checked, и если да, то находим на уровне кнопки контроллер и внутри соответственно порядковому номеру выбираем label, применяем к нему стили.
Кратко: мы сделали новые радиокнопки, ура.
Теперь мы на финишной прямой, осталось оживить.
Есть несколько вариантов, выбирайте, какой вам больше нравится
px; // размер 1 слайда + разрыв между слайдами @for $i from 1 through 5 < #radio#:checked ~ .wrapper .slider < transform: translateX(0 - $size * ($i - 1)); /* или при position: relative */ left: 0 - $size * ($i - 1); /* или */ margin-left: 0 - $size * ($i - 1); >> 
В общем ничего сложного, проверяем кнопку, ищем обертку, двигаем слайдер.
Поздравляю, вы получили слайдер!
- Не поддерживает одновременно drag-слайдинг и поведение кнопок
- Сам по себе drag-слайдинг самостоятельно не докручивает до ближайшей карточки
Вывод: придется использовать или одно или другое Решение: научиться пользоваться JS
На данный момент не обязательно самостоятельно реализовывать слайдер, можно просто использовать готовые решения к примеру: https://a11yslider.js.org/, хороший адаптивный слайдер, сам пользуюсь.
Но всегда надо помнить, что опыт самостоятельного нахождения решения — один из важнейших навыков во всех сферах жизни. Возможно, вам никогда не пригодятся какие-то конкретные навыки, но суть обучения не в том, чтобы просто повторять, а понимать, что происходит и как оно все устроено.
До свидания, хорошего дня!
Слайдер для html сайта
Слайдер стал пользоваться большой популярностью сравнительно недавно. Где-то на половине всех шаблонов можно встретить слайдер.
Слайдер представляет из себя область сайта (как правило центральная часть, сразу после шапки). Его цель сделать сайт более информативным, «живым», попытка в нескольких картинках описать достоинства компании или товара.
Вариантов создания слайдера множество. Мы рассмотрим несколько самых популярных из низ. К каждому способу будут приведены исходники.
Вариант №1. Слайдер на JQuery (JavaScript)
html> head> link href value">style.css" rel value">stylesheet" /> script src value">https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">/script> script src value">script.js">/script> /head> body> div id value">slider-wrap"> div id value">slider"> div class value">slide">img src value">foto1.jpg" width value">500" height value">300">div> div class value">slide">img src value">foto2.jpg" width value">500" height value">300">div> div class value">slide">img src value">foto3.jpg" width value">500" height value">300">div> div> div> /body> /html>
Это фотография, что получится с помощью этого варианта (ниже представлен исходник с этим примером)
Для работы слайдера Вам необходимо сделать следующее:
- Подключить javascript (ява файлы) в заголовочных тегах
- Файл стилей опять же в заголовочных тегах
- В месте где нужно вывести слайдер заполнить тег (как в примере выше)
Вариант №2. Слайдер на основе CSS
Дабы не нагружать сайт лишними скриптами, есть отличный способ сделать слайдер только на основе CSS (т.е. чисто на стилях). Давайте рассмотрим пример.
html> head> link href value">style.css" rel value">stylesheet" /> /head> body> div class value">slide"> input type value">radio" name value">slider2" id value">slider2_1" checked value">checked"> label for value">slider2_1">label> div>p>Пример №1 p> img src value">foto1.jpg">div> for value">slider2_2">label> input type value">radio" name value">slider2" id value">slider2_2"> label for value">slider2_2">label> div>p>Пример №2 p> img src value">foto2.jpg">div> label for value">slider2_3">label> input type value">radio" name value">slider2" id value">slider2_3"> label for value">slider2_3">label> div>p>Пример №3 p> img src value">foto3.jpg">div> label for value">slider2_4">label> /div> /body> /html>
Вот, что должно получится:
На мой взгляд, довольно простой и хороший слайдер. Плюс здесь можно легко дописывать текст к каждой фотографии. с помощью тега
, а если нет необходимости, то его можно не писать.
Можно добавлять еще слайдеры (в примере всего три фото).
Красивые слайдеры с codepen.io
Codepen.io — это сборник различных pen-ов (ручек, если перевести дословно), а точнее примеров кода из различных областей — от HTML/CSS до JavaScript/jQuery и React/Angular. Там вполне реально найти идеи для своего сайта или рецепты для решения какой-либо задачи, связанной с сайтостроением. Сегодня мы посмотрим на примеры слайдеров.
Отзывчивый слайдер-параллакс с прозрачными буквами и перетаскиваемыми слайдами
Слайдер с анимацией
Прокрутите колесико мышки или нажмите на квадратики внизу справа, чтобы отобразить следующий слайд с анимационным появлением текста.
See the Pen Slider transitions by Mirko Zorić (@fluxus) on CodePen.light
Выскакивающий слайдер
В этом слайдере изображение отображается на фоне самого себя, только в размытом варианте. Нажмите на next для перехода к следующему слайду.
Автор Nathan Taylor
See the Pen Popout Slider by Nathan Taylor (@nathantaylor) on CodePen.dark
Несколько слайдеров от одного автора.
Слайдер со скосом
Прокрутите колесико мышки для достижения эффекта слайдера.
See the Pen Skewed One Page Scroll by Nikolay Talanov (@suez) on CodePen.dark
Слайдер со скосом-2
От того же автора Nikolay Talanov слайдер со скосом и текстом на фоне картинки. Управление — с помощью точек-переключателей внизу слайдера. Лучше смотрится на большом экране или с изменением масштаба до 0.5, иначе вы увидите прямоугольники вместо скошенных треугольников.
Интересный макет с анимацией и меню
Здесь тоже нужно воспользоваться скроллингом, чтобы посмотреть на смену картинок, нарезанные слайдами.
Слайдер с видами городов
Слайдер с видами городов и нарезкой фото. Управление стрелками.
See the Pen Cities Slider (React) by Nikolay Talanov (@suez) on CodePen.dark
Слайдер для одежды
Хоть автор и назвал свой слайдер Fashion concept, но его подход можно использовать для любых изображений.
Волнообразный слайдер
Просто прокрутите колесо мыши.
See the Pen Wavescroll (drag background) by Nikolay Talanov (@suez) on CodePen.dark
Слайдер для кинофильмов с возможностью просмотра трейлеров с Youtube
Фотогалерея-слайдер со сменой картинок с искажением
See the Pen Distorted Gallery by Nikolay Talanov (@suez) on CodePen.dark
Fancy Slider
Еще один симпатичный слайдер от Nikolay Talanov с красивой анимацией, заголовками и навигацией в правом нижнем углу.
See the Pen Fancy Slider by Nikolay Talanov (@suez) on CodePen.dark
Clip-Path Revealing Slider
Продолжаем галерею слайдеров от Nikolay Talanov с использованием свойства clip-path . Управление стрелками. Подробно почитать о свойстве clip-path можно в отдельной статье.
See the Pen Clip-Path Revealing Slider by Nikolay Talanov (@suez) on CodePen.dark
Вращающийся 3D слайдер
See the Pen Rotating 3D Slider by Nikolay Talanov (@suez) on CodePen.dark
Вращающийся куб со сменой картинок
See the Pen Animated cube slider by Alberto Hrtzt (@hrtzt) on CodePen.0
Слайдер на основе GSAP анимации
See the Pen Voyage Slider | GSAP by Sikriti Dakua (@dev_loop) on CodePen.0
Несколько 3D-каруселей для изображений
See the Pen 3D Carousel Gallery II by Nikolay Talanov (@suez) on CodePen.dark
Еще один вариант 3D-карусели с помощью GSAP от Tom Miller.
See the Pen 3D Carousel by Yoav Kadosh (@ykadosh) on CodePen.0
Бесконечная 3d карусель от Jhey
Карусель под углом от Fabio Ottaviani
Cлайдер-аккордеон
Изображения отображаются при наведении на прямоугольняй блок. Задействована GSAP анимация.
Слайдер-карусель со сменой фоновых изображений
Еще один слайдер-карусель на основе GSAP-анимации.
Слайдер-карусель изображений от Kristen
Карусель вкусных блюд на основе Swiper от Kristen
Слайдер карт на основе Swiper
See the Pen Card Effect | Swiper by Ecem Gokdogan (@ecemgo) on CodePen.0
Слайдер со скролбаром
Слайдер на весь экран
Перемещаемый слайдер
Потяните за стрелки внизу слайдера, чтобы переместить изображения с текстом.
See the Pen When you can’t decide. by Paulina Hetman (@pehaa) on CodePen.0
React-слайдер
See the Pen React Slider by Nikolay Talanov (@hexagoncircle) on CodePen.dark
Слайдер для показа домов
See the Pen Animated Slider by Kasper De Bruyne (@kdbkapsere)
on CodePen.0
Слайдер с делением на 2 части на основе Slick-slider
Для создания такого слайдера вам придется подключить jQuery и slick-slider. Смотрите в настройки проекта на codepen.io: вкладки CSS и JS.
See the Pen Split Slick Slideshow by Fabio Ottaviani (@supah) on CodePen.dark
Интересный слайдер для продуктов в бутылках
Интересная идея на основе Swiper-слайдер.
eCommerce слайдер
Еще один продуктовый слайдер от автора Sebi. На этот раз с кроссовками и даже с возможностью посмотреть детали в виде размера, с наличием кнопки добавления в корзину.
Слайдер для книг
На первый взгляд кажется, что автор этого слайдера Aysenur Turk обошлась без использования JS, только HTML и SCSS. Однако, если заглянуть в настройки JS на Codepen, то мы увидим ссылку на плагин Flickity.
Слайдер с информацией
Автор этого слайдера Nathan Taylor назвал его Info Cards. В JS-коде нужно указывать, какие именно классы будут анимированы.
See the Pen Info Cards by Nathan Taylor (@nathantaylor) on CodePen.0
Липкий слайдер
Автор Lewi Hussey использовал в своем слайдере код на jQuery с эффектом уменьшения блока при смене слайдера.
See the Pen Gummy slider by Lewi Hussey (@Lewitje) on CodePen.0
CSS-слайдер для изображений с подписями
Слайдер основан на css-свойствах animation и @keyframes.
Слайдер с прокруткой
CSS-слайдер с управлением стрелками и точками
Вместо точек — линии внизу, как в Bootstrap-карусели.
CSS-слайдер с подписями на треугольном фоне
Еще один CSS-слайдер. Под слайдером вы найдете инструкцию по встраиванию слайдера на вашу html-страницу.
See the Pen Pure CSS3 slider by Aladin Bensassi (@Eliteware) on CodePen.dark
CSS-слайдер в виде картины
Слайдер для навигационного меню
Очень интересное решение для меню на Landing Page. Прокручивая контент, вы видите, как перемещается полоса к активному пункту меню.
Страница со слайдером на основе плагина Slick slider
Слайдер использует не только изображения, но и видео с youtube.com, HTML5 видео с собственного сайта. Для подключения слайдера вам понадобится подключить jQuery и Slick Slider.
Отзывчивый слайдер с автоматической прокруткой и описанием
Для слайдера использованы только HTML5 и CSS3 с анимацией типа @keyframes .
Круговой вращающийся слайдер (Circular Slider)
Бесконечный перетаскиваемый слайдер
Эффект разрыва фото для смены изображений в фотогалерее
Этот пример сложно назвать слайдером, хотя эффект смены фотографий, безусловно, заслуживает внимания. В отличие от настоящих, эти фото не разрываются навсегда. Фотогалерею можно пересматривать заново, даже не нажимая на кнопку Rerun.
Проведите мышкой сверху вниз для получения эффекта.
See the Pen Photo Tear by Steve Gardner (@ste-vg)
on CodePen.0
Фотогалерея с увеличивающимися изображениями
При клике на любую картинку она увеличивается и смещает соседнюю. Реализовано с анимацией GSAP. Автор Paulina Hetman
Фотогалерея с интересным появлением фото в виде pop-up
Кликните на любом изображении.
Эффект смены изображений для вкладок
Автор Zed Dash предлагает вам эффект смены изображений на основе увеличения одной из картинок.
Смена разделов страницы сайта при скроллинге
Очень симпатичный вариант скроллинга разделов страницы от Ryan Mulligan.
И еще один вариант скроллинга разделов от того же автора.
Слайдер в виде вкладок от noirsociety
Вертикальный слайдер
Слайдеры, меняющиеся при наведении курсора, от Ivan Grozdic
See the Pen Hover slider by Ivan Grozdic (@ig_design) on CodePen.0
Центрированный вариант с крупным меню
Идея для оформления шапки сайта
Не совсем слайдер, т.к. нет пролистывания изображений. Зато есть эффекты при наведении и клике на любом из изображений.
Автор Ruslan Pivovarov, работа которого открывала эту подборку слайдеров.
Автоматическое перемещение изображений с помощью css-анимации
Строго говоря, это не слайдер. Однако, возможно, вам пригодится эффект перемещения изображений с помощью css от Ryan Mulligan.