Как сделать такой слайдер на чистом Html css?
Что-то получилось. Надо смотреть через caniuse на поддержку другими браузерами, но у меня в 109 Google работает корректно.
.container < padding: 2rem; >.slider-wrapper < position: relative; max-width: 48rem; margin: 0 auto; >.slider < display: flex; aspect-ratio: 16 / 9; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; >.slider img < flex: 1 0 100%; scroll-snap-align: start; >.slider-nav < display: flex; column-gap: 1rem; position: absolute; bottom: 1.25rem; left: 50%; transform: translateX(-50%); z-index: 1; >.slider-nav a < width: 0.5rem; height: 0.5rem; border-radius: 50%; background-color: #fff; opacity: 0.75; >::-webkit-scrollbar
Обучение веб-разработке на практике: пишем слайдер на JavaScript
Обучение веб-разработке даётся проще, если к теории подключена практика. Предлагаем попрактиковаться на слайдере без использования сторонних библиотек.
Обучение веб-разработке на практике эффективнее голой теории: всё наглядно, а полученные в ходе разработки решения можно использовать в будущих проектах. Именно поэтому мы совместно с онлайн-школой GeekBrains подготовили туториал по созданию простого слайдера изображений с объяснением каждого шага. Вот так будет выглядеть финальная версия:
Примечание Данная статья — лишь небольшое погружение в мир фронтенд-разработки, ведь современный веб не ограничивается знанием HTML/CSS/JavaScript. Чтобы стать востребованным веб-разработчиком, необходимо осваивать дополнительные библиотеки и фреймворки, которые часто строго разделены между фронтендом и бэкендом.
Что понадобится?
Можно сразу скачать IDE вроде WebStorm, но при обучении веб-разработке с нуля можно начать и в онлайн-редакторе. Мы будем использовать CodePen — популярный онлайн-редактор для веб-разработчиков с мгновенным отображением результата. Но если вы уже начали работу в какой-либо другой среде и считаете, что она намного удобнее, просто убедитесь, что есть поддержка HTML/CSS/JavaScript.
Пишем код
На различных курсах веб-разработки знакомство с фронтендом начинается с описания основных технологий, а именно:
- HTML — язык гипертекстовой разметки, на котором пишется «скелет» сайта. Если провести аналогию с домом, то это каркас. Грубо говоря, вы строите разметку, на которую после будет ложиться оформление.
- CSS — каскадные таблицы стилей или то самое оформление. Вернёмся к примеру с домом: после постройки его нужно облицевать, покрасить, сделать презентабельным, и именно CSS описывает внешний вид сайта.
- JavaScript — язык программирования, который обеспечивает функциональность. Вы можете взаимодействовать с вещами в вашем доме — включать и выключать свет, бытовую технику, воду и многое другое. Вы точно так же можете взаимодействовать с сайтом, нажимая кнопки, наводя курсор на изображения и заполняя формы. JavaScript обрабатывает все эти взаимодействия, и, как язык сценариев, он может предоставлять правила и логику для определения того, что должно произойти дальше.
HTML
Обучение веб-разработке стоит начать с HTML, так как это каркас сайта. Каждый HTML-документ имеет стандартную структуру:
не отображается на странице, помогает в работе с данными и хранит информацию для поисковых систем и браузеров: —> Устанавливает заголовок для окна веб-страницы
Делаем слайдер для сайта html css
В одном проекте мне понадобился адаптивный резиновый слайдер и я решил написать слайдер для сайта html css. Использовать javascript я не захотел, так как все поставленные мной задачи можно решить и на чистом css.
И так начинаем писать наш слайдер на css. Что же будет делать слайдер и какие технологии мы будем использовать. Всё будет работать на свойстве tabindex и использоваться css 3 свойство animation и @keyframes для автоматической прокрутки картинок. Слайдер в автоматическом режиме будет крутит картинки в браузерах с поддержкой css3 и давать возможность листать слайды кнопками в остальных. Он не будет работать в ИЕ 7-8 так как у них проблемы с tabindex. Для работы в ие нужен будет js скрипт. Так же наш слайдер для сайта будет резиновый, то-есть масштабируемый по размерам экрана. Для уменьшения количества текста в плашке в зависимости от разрешения экрана будут использоваться медиазапросы. Вот такие вот задачи нужно будет реализовать. Начнём с html кода. Листинг ниже.
Тяжёлый танк: ИС-4
Мы имеем див .slider , он является обёрткой для всех наших картинок, групп кнопок, плашек с описанием и тд. Так же мы имеем группу кнопок .but1 , .but2 и тд им мы назначим tabindex . Смена наших слайдов будет происходить в зависимости от того какая кнопка у нас в фокусе. Ещё один важный аспект html разметки кнопок заключается в том, что они в потоке документа должны быть выше тех дивов к которым будет применяться действие когда кнопка будет в фокусе. Это связанно с тем, что мы должны обращаться к этим дивам через селекторы ~ или + . Дивы .round1, round2 . и тд своего рода подложка под кнопки .but1, .but2. , эти кнопки имеют прозрачный фон, а к их подложке мы прикручиваем анимацию кнопок при автоматической смене слайдов. Соответственно раз у нас 5 слайдов то и 5 кнопок и 5 подложек. Каждую нашу картинку мы оборачиваем в блок .img1, .img2.. , туда же мы помещаем блок с описанием картинки. На этом описание html разметки закончим и перейдём к css.
Начнём пожалуй с слайдов. Спозиционируем их правильно и создадим для них анимацию.
.img1 < position: relative;/*для резины*/ max-width: 100%; -webkit-transition-property:opacity, z-index; -webkit-transition-duration:2s; -moz-transition-property:opacity, z-index; -moz-transition-duration:2s; -o-transition-property:opacity, z-index; -o-transition-duration:2s; transition-property:opacity, z-index; transition-duration:2s; opacity: 1; /*не прозрачная только первая картинка*/ z-index: 1; >.img2, .img3, .img4, .img5 < position: absolute; top: 5px; left: 5px; right: 5px; -webkit-transition-property:opacity, z-index; -webkit-transition-duration:2s; -moz-transition-property:opacity, z-index; -moz-transition-duration:2s; -o-transition-property:opacity, z-index; -o-transition-duration:2s; transition-property:opacity, z-index; transition-duration:2s; opacity: 0;/*все остальные прозрачные*/ >img < max-width: 100%;/*картинка резиновая*/ vertical-align: middle; >
Мы складываем наши слайды в стопку друг над другом, позиционируя их абсолютно. Исключение составляет только первый слайд .img1 . Он позиционируется относительно, для того что бы наш слайдер был резиновым и масштабировался по высоте и ширине. Так же всем слайдам мы задаём нулевую прозрачность opacity: 0 . Опять же исключение из правил составляет слайд .img1 . Ему мы не задали прозрачность. Это нужно для того, что бы хотя бы один слайд был виден в браузерах не поддерживающих свойство css3 animation .
Анимируем слайдер на css
Теперь давайте поговорим об анимации. Мы будем, как мы раньше говорили, изменять состояние слайда когда кнопка .but1 или другие будут получать состояние фокус. Так вот у слайда будут меняться свойства прозрачности с 0 на 1 и z-index от 1 до 15 для того что бы слайд был поверх других. Происходить это будет плавно за 2 секунды. Про реализацию действия мы поговорим ниже.
Продолжая разбирать тему анимации давайте опишем автоматическую анимацию наших слайдов. До этого мы разбирались с реализацией анимации при клике по кнопке. Освежить память по свойствам анимации можно здесь.
.img1 < /*вся анимация для блоков img длится 30с*/ /*и повторяется бесконечно*/ animation: imgAnim 30s linear infinite; -webkit-animation: imgAnim 30s linear infinite; -moz-animation: imgAnim 30s linear infinite; -o-animation: imgAnim 30s linear infinite; >.img2 < /*--задержка 6 сек----*/ animation: imgAnim 30s linear 6s infinite; /*правила с браузерными префиксами*/ >.img3 < /*----12 сек-----*/ animation: imgAnim 30s linear 12s infinite; /*правила с браузерными префиксами*/ >.img4 < animation: imgAnim 30s linear 18s infinite; /*правила с браузерными префиксами*/ >.img5 < animation: imgAnim 30s linear 24s infinite; /*правила с браузерными префиксами*/ >
Описанная в листинге выше анимация бесконечна и запускается при загрузке страницы. Каждая картинка у нас будет показываться и исчезать за счёт изменения её прозрачности. Что бы это не было одновременно для всех создадим задержку в анимации для определённой картинки. Так как у нас общая анимация 30 сек картинок 5 30/5=6сек. Такая вот будет у нас задержка перед показом 2й картинки, 12 сек перед показом третьей и тд.
@keyframes imgAnim < 0% < opacity: 0; z-index: 5; >8% < opacity: 1; z-index: 5; >17% < opacity: 1; z-index: 5;>25% < opacity: 0; z-index: 5; >100% < opacity: 0; z-index: 5; >> @-webkit-keyframes imgAnim < /*------------------*/ >@-o-keyframes imgAnim < /*------------------*/ >@-moz-keyframes imgAnim < /*------------------*/ >
В листинге выше описаны шаги анимации. Давайте разберёмся как мы их рассчитали. Шаги у нас задаются в % от всего времени анимации. Определим какое время показывается наша картинка. 5/30=0.1666 17% столько процентов от общего времени показывается один слайд. Чтобы картинка появлялась плавнее зададим её появление например (17/2=9) с 9%. Для ие 10 нужно задавать в анимации Z-индекс, если его не задать, то перемещение слайдов видно не будет так как они все будут закрываться первым слайдом. Теперь давайте напишем css код и для дивов с плашками описания.
.discript1, .discript2, .discript3, .discript4, .discript5 < position: absolute; width: 35%; background-color: rgba(0, 0, 0, 0.56); bottom: 15px; padding: 10px; >.tank h3 < color: #fff; margin: 0; margin-bottom: 3px; font-family: Times New Roman; >.tank p
Тут я думаю всё просто и комментарии не нужны. Для полноты картины нам осталось только реализовать паузы в анимации при наведении на слайдер. Сss код ниже.
.slider:hover .tank
Вот у нас уже начинает получаться задуманный нами слайдер. На данном этапе если мы сделали всё правильно, слайдер будет автоматически прокручивать картинки и становиться на паузу при наведении на слайд. Давайте теперь научимся управлять этим процессом вручную.
Подключение кнопок прокрутки в слайдер на css
Для управления мы в html коде описали кнопки и их подложку. Давайте напишем для них css стиль.
.but1, .but2, .but3, .but4, .but5 < position: absolute; width: 14px; height: 14px; background: transparent; bottom: 25px; left: 50%; right: 10px; text-align: center; cursor: pointer; z-index: 1000; box-shadow: -1px -1px 1px 1px rgba(0,0,0, 0.5); -webkit-border-radius: 7px; -moz-border-radius: 7px; -ms-border-radius: 7px; -o-border-radius: 7px; border-radius: 7px; outline:none; >.but1 < margin-left: -50px; >.but2 < margin-left: -25px; >.but4 < margin-left: 25px; >.but5 < margin-left: 50px; >.round1, .round2, .round3, .round4, .round5 < position: absolute; width: 14px; height: 14px; background: #fff; bottom: 25px; left: 50%; right: 10px; text-align: center; cursor: pointer; z-index: 999; box-shadow: -1px -1px 1px 1px rgba(0,0,0, 0.5); -webkit-border-radius: 7px; -moz-border-radius: 7px; -ms-border-radius: 7px; -o-border-radius: 7px; border-radius: 7px; outline:none; >.round1 < margin-left: -50px; >.round2 < margin-left: -25px; >.round4 < margin-left: 25px; >.round5
Мы спозиционировали кнопки абсолютно, с помощью border-radius сделали их круглыми, прозрачными и задали z-index: 1000 что бы они были поверх всех элементов слайдера. Кнопки у нас прозрачные, и мы под ними расположили подложки (за счёт меньшего z-index), к которым мы применим анимацию, которая будет затемнять определённую кнопку для определённого слайда. Опишем теперь анимацию подложек.
.round1 < animation: butAnim 30s linear infinite; /*правила с браузерными префиксами*/ >.round2 < animation: butAnim 30s linear 6s infinite; /*правила с браузерными префиксами*/ >.round3 < animation: butAnim 30s linear 12s infinite; /*правила с браузерными префиксами*/ >.round4 < animation: butAnim 30s linear 18s infinite; /*правила с браузерными префиксами*/ >.round5 < animation: butAnim 30s linear 24s infinite; /*правила с браузерными префиксами*/ >@keyframes butAnim < 0% 8% 17% 25% 100% > @-webkit-keyframes butAnim < /*------------------*/ >@-o-keyframes butAnim < /*------------------*/ >@-moz-keyframes butAnim < /*------------------*/ >/*пауза в анимации подложки при наведении на слайдер*/ .slider:hover .nav
Эта автоматическая анимация устроена аналогично анимации слайдов, так что подробно описывать её смысла нет. На данном этапе мы имеем слайдер автоматически листающий картинки и плашки с описаниями, а так же мы имеем кнопки для листания картинок слайдера с анимацией затемнения кнопки для определённого слайда. Теперь нам нужно реализовать действия, которые мы хотим производить с слайдером.
Но перед решением вопроса реализации действия у нас возникает проблема с анимацией. Она заключается в том, что анимация css имеет приоритет перед всеми действиями, которые мы хотим назначить кнопкам. Следовательно анимацию перед исполнением действия при нажатии кнопки нужно отключить.
/*Сбрасываем анимацию слайдов при нажатии кнопки*/ .but1:focus ~ .tank, .but2:focus ~ .tank, .but3:focus ~ .tank, .but4:focus ~ .tank, .but5:focus ~ .tank < -moz-animation: none; -webkit-animation: none; -o-animation: none; animation: none; >/*когда кнопка в фокусе сбрасывается анимация кругляшей*/ .but1:focus ~ .nav, .but2:focus ~ .nav, .but3:focus ~ .nav, .but4:focus ~ .nav, .but5:focus ~ .nav
Вот теперь можно заняться привязкой действия к кнопкам. Мы решили, что при нажатии на кнопку у нас должна показываться определённая картинка. Так же выбранная кнопка должна затемняться.
/*действие меняющее слайд*/ .but1:focus ~ .img1, .but2:focus ~ .img2, .but3:focus ~ .img3, .but4:focus ~ .img4, .but5:focus ~ .img5 < opacity: 1; z-index: 15; >/*делаем кнопку в фокусе серой. */ .but1:focus, .but2:focus, .but3:focus, .but4:focus, .but5:focus
Как я писал выше действие нашего слайдера основано на свойстве tabindex . Подробнее о реализации клика в css можно почитать здесь. С помощью этого свойства мы задаём нашим кнопкам событие фокус, на которое можем повесить действие. Наше действие заключается в том, что мы прозрачный слайд делаем не прозрачным и помещаем его с помощью z-index выше первого слайда .img1 . После ухода фокуса с кнопки всё возвращается назад, все анимации запускаются заново.
Так как у нас слайдер резиновый то нам нужно уменьшать плашку с описанием в зависимости от величины слайдера. Используем для этого медиазапросы Если разрешение экрана будет меньше 740px мы из плашки будем убирать текст с описанием и оставим только уменьшенный заголовок и ссылку.
@media only screen and (max-width:740px) < .tank p< display: none; >.tank h3 < font-size: 14px; text-align: center; >>
Как я раньше говорил, наш слайдер не работает в ИЕ 7-8. Для этих браузеров уберём вывод кнопок и плашек с описанием. Пусть у нас будет выводиться в этих браузерах только картинка.