Как сделать авто-слайдер?
Как сделать авто-слайдер? Есть только обычный:
!DOCTYPE html>
html>
head>
title>/title>
link rel=»stylesheet» type=»text/css» href=»style.css»>
meta charset=»utf-8″>
/head>
body>
div >
input checked type=»radio» name=»respond» >
article >
input checked type=»radio» name=»slider» >
input type=»radio» name=»slider» >
input type=»radio» name=»slider» >
div >
div >
div >
article>
article>
article>
/div>
/div>
/div>
/div>
div >
label for=»switch1″>
label for=»switch2″>
label for=»switch3″>
/div>
div >
label for=»switch1″>
label for=»switch2″>
label for=»switch3″>
/div>
/article>
/div>
/body>
/html>
#desktop:checked ~ #slider < /*размер всего слайдера*/
max-width: 960px; /*максимальнная длинна*/
>
/*настройка переключения и положения для левой стрелки*/
/*если свич1-5 активны, то идет обращение к лейблу из блока с id контролс*/
#switch2:checked ~ #controls label:nth-child(3),
#switch3:checked ~ #controls label:nth-child(1),
#switch4:checked ~ #controls label:nth-child(2), background: url(‘prev.png’) no-repeat; /*заливка фона картинкой без повторений*/
float: left;
margin: 0 0 0 -84px; /*сдвиг влево*/
display: block;
height: 68px;
width: 68px;
>
/*настройка переключения и положения для правой стрелки*/
#switch1:checked ~ #controls label:nth-child(2),
#switch2:checked ~ #controls label:nth-child(3),
#switch5:checked ~ #controls label:nth-child(1) background: url(‘next.png’) no-repeat; /*заливка фона картинкой без повторений*/
float: right;
margin: 0 -84px 0 0; /*сдвиг вправо*/
display: block;
height: 68px;
width: 68px;
>
/*позиция изображения при активации переключателя*/
#switch1:checked ~ #slides .image margin-left: 0;
>
#switch2:checked ~ #slides .image margin-left: -100%;
>
#switch3:checked ~ #slides .image margin-left: -200%;
>
#active label < /*стиль отдельного переключателя*/
border-radius: 10px; /*скругление углов*/
display: inline-block; /*расположение в строку*/
width: 15px;
height: 15px;
background: #bbb;
>
#active label:hover < /*поведение чекбокса при наведении*/
background: #76c8ff;
border-color: #777 !important; /*выполнение в любом случае*/
>
/*цвет активного лейбла при активации чекбокса*/
#switch1:checked ~ #active label:nth-child(1),
#switch2:checked ~ #active label:nth-child(2),
#switch3:checked ~ #active label:nth-child(3), background: #18a3dd;
border-color: #18a3dd !important;
>
#slides .image < /*анимация пролистывания изображений*/
transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
>
- Вопрос задан более трёх лет назад
- 2100 просмотров
3 комментария
Простой 3 комментария
Как сделать слайдер на сайте html css
Один из самых простых способов для создания слайдера на html и css — это использование стандартного CSS свойства scroll-snap-type в сочетании с scroll-snap-align .
Для этого нужно создать контейнер, в котором будут располагаться слайды, и задать ему свойство scroll-snap-type: x mandatory; , чтобы горизонтальный скролл происходил с определенным шагом. Затем для каждого слайда нужно задать свойство scroll-snap-align: start; , чтобы они выравнивались по левому краю контейнера.
06 апреля 2023
.container display: flex; overflow-x: scroll; scroll-snap-type: x mandatory; width: 300px; -webkit-overflow-scrolling: touch; /* для плавной прокрутки на мобильных устройствах */ > Правило scroll-snap-type: x mandatory указывает, что прокрутка должна происходить только по горизонтали, а элементы должны привязываться к точкам привязки, заданным в этом направлении. Правило overflow-x: scroll задаёт горизонтальную прокрутку.
Далее, необходимо задать точки привязки для элементов слайдера, для этого используется свойство scroll-snap-align :
.slide flex: none; scroll-snap-align: start; width: 300px; text-align: center; > Правило scroll-snap-align: start указывает, что элемент должен привязываться к началу контейнера при прокрутке.
class="container"> class="slide">Первый слайд class="slide">Второй слайд class="slide">Третий слайд Таким образом, при прокрутке контейнера элементы будут переключаться по одному, в соответствии с заданными точками привязки.
Делаем слайдер для сайта 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. Для этих браузеров уберём вывод кнопок и плашек с описанием. Пусть у нас будет выводиться в этих браузерах только картинка.
Все еще зависит от тематики ресурса. Ведь если ставить под интернет магазин, то все отлично подойдет. Все присутствующие изображение загрузить в слайд, также самостоятельно в CSS задать скорость, но разве только обновлять снимки, что идут на показ для гостей и пользователей. Также его дизайн прекрасно поддерживают все популярными браузерами, где все отлично выводит по информации и того функционала, что на нем присутствует с помощью чистого CSS.
При заходе на ресурс или открытие новой страницы, он в реальности так выглядит.
Здесь больше подходит к планшету, или смартфону.
Это уже с не очень большим экраном, что может вывести снимки.
Приступаем к установке регулярно обновляемой подборке слайдеров интернет площадки.
* <
margin: 0;
padding: 0;
box-sizing: border-box;
>
body <
background: #fff;
margin: 2em;
>
.slperekhodnik <
max-width: 38em;
margin: 0 auto;
width: 100%;
>
.gablok_sedakoda <
width: 100%;
margin: 0 auto;
overflow: hidden;
>
.slayder_karusel <
position: relative;
width: 500%;
font-size: 0;
animation: 8s gablok_sedakoda-ani infinite;
>
.slayder_karusel figure <
width: 20%;
height: auto;
display: inline-block;
position: inherit;
>
.slayder_karusel img <
max-width: 100%;
vertical-align: bottom;
>
.slayder_karusel img:hover <
filter: grayscale(90%);
>
.slayder_karusel figure figcaption <
position: absolute;
font-family: 'Roboto';
font-size: 1.4rem;
font-weight: 100;
text-transform: uppercase;
bottom: 0;
background: rgba(0,0,0,0.6);
color: #fff;
width: 100%;
padding: .5em;
>
@keyframes gablok_sedakoda-ani <
0% <
left: 0%;
>
Как уже было сказано, что эта вещь довольно легко настраивается, где все производится в прикрепленных стилях. Вы можете смело менять шрифт или поставить свой размер.
Ведь в низу идет темно прозрачная панель на которой показываются ключевые слова, где аналогичным способом их можно закрепить под переход к основному материалу.