Как сделать слайдер для сайта на HTML+CSS

Небольшая ошибка на 8:18!

#slides .image{ /*устанавливает общий размера блока с изображениями*/
width:500%; - Здесь должно быть 500%, а не 50%.
line-height:0;
}
---------------------------------------------------------
В этом видео уроке я расскажу и покажу, и даже предоставлю исходники, простого и красивого слайдера на CSS и HTML без JavaScript. Приятно просмотра!

❖ Ссылки на материалы из урока:

❖ Ссылка на список анимаций:

[Antei]

Молодец, но большой минус в том что после прописания кода вы не показываете изменения в браузере... Для начинающих это важно. А так сплошной код и только в конце результат.. Для меня это большой минус!

[pavlodziuba]

Спасибо огромное !! Качество и озвучка просто на высоте)

[BestFighting]

Огромное Спасибо ! Сильно помог. 3 дня искал видео урок и по твоему за 3 минуты сделал ! Красавчик !

[glzmnlk]

Через минуту подписался) Приятный голос, хорошо объясняешь, расслабляющая музыка. Мне нравится)

[TheGimanoid]

Урок очень интересный и понятный, а главное полезный. Удачи автору в его начинаниях и по больше таких уроков.

[xoprhfp]

Я думал только на js можно слайдеры делать.
Красава, спасибо за видос и за архив в особенности)

[yhxsppz]

канал который приятно слушать не смотря на материал

[alenatv]

Огромное СПАСИБО :) Кратко по сути и доступно для моего недалекого ума. Лайк и подписка!!!

[rndlclp]

Лайк, действительно редко такие уроки встретишь.

[vla_gba]

Вот CSS

#slider { /* положение слайдера */
position:relative;
text-align:center;
top: 10px;
margin:0 auto;
}
#slider { /* центровка лайдера */
margin:0 auto;
}
#slider article{ /* все изображения справа друг от друга */
width:20%;
float:left;
}
#slides .image{ /* устанавливает общий размер блока с изображениями */
width:500%;
line-height:0;
}
#overflow { /* скрывает всё, что находиться за пределами этого блока */
width:100%;
overflow:hidden;
}
article img { /* размер изображений слайдера */
width:100%;
}
#desktop:checked - #slider{ /* размер всего слайдера */
max-width: 960px; /* максимальная длина */
}
/* настройка положения и переключения левой стрелки */
/* если свитч 1-5 активны, то идёт обращение к лейблу из блока с айди контролс */
#switch1:checked - #controls label:nth-child(5),
#switch2:checked - #controls label:nth-child(1),
#switch3:checked - #controls label:nth-child(2),
#switch4:checked - #controls label:nth-child(3),
#switch5:checked - #controls label:nth-child(4){
background: url('../images/prev.jpg') no-repeat;
float:left;
margin: 0 0 0 -84px;
display: block;
height:68px;
width:68px;
}
/* настройка положения и переключения правой стрелки */
/* если свитч 1-5 активны, то идёт обращение к лейблу из блока с айди контролс */
#switch1:checked - #controls label:nth-child(2),
#switch2:checked - #controls label:nth-child(3),
#switch3:checked - #controls label:nth-child(4),
#switch4:checked - #controls label:nth-child(5),
#switch5:checked - #controls label:nth-child(1){
background: url('../images/next.jpg') no-repeat;
float:right;
margin: 0 -84px 0 0;
display: block;
height:68px;
width:68px;
}
label, a{ /* при наведении на стрелки или переключатели - курсо изментиться */
cursor:pointer;
}
.all input{ /* скрывает стандартные инпуты (чекбоксы) на стрвнице */
display: none;
}
/* позиция изображения для активации переключателя */
#switch1:checked - #slider .image{
margin-left:0;
}
#switch2:checked - #slider .image{
margin-left:-100%;
}
#switch3:checked - #slider .image{
margin-left:-200%;
}
#switch4:checked - #slider .image{
margin-left:-300%;
}
#switch5:checked - #slider .image{
margin-left:-400%;
}
#controls{ /* положение блока всех управляющих елементов */
margin: -25% 0 0 0;
width:100%;
height:50px;
}
#active label{ /* стиль отдельного переключателя */
border-radius:10px;
display: inline-block;
width: 15px;
height:15px;
background: #bbb;
}
#active { /* расположение блока с переключателями */
margin:23% 0 0 ;
text-align:center;
}
#active label:hover{ /* поведение чекбокса при наведении */
background: #76c8ff;
border-color:#777 1important;
}
/* цвет активного лейбла при активации чекбокса */
#switch1:checked - #active label:nth-child(1),
#switch2:checked - #active label:nth-child(2),
#switch3:checked - #active label:nth-child(3),
#switch4:checked - #active label:nth-child(4),
#switch5:checked - #active label:nth-child(5){
background:#18a3dd;
border-color:#18a3dd !important;
}
#slides .image{ /* анимация пролистывания изображений */
transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
}
#controls label:hover{
opacity:0.6;
}
#controls label{
transition: opacitty 0.2s ease-out
}

[sinkplay]

Круто
Дикция хорошая, голос приятный, фоновая музыка тоже замечательна.

[usu]

Все очень понятно, круто. За архив отдельный респект

[Superov]

Интересно, оказывается css очень огромен! Даже JavaScript не понадобился для создания баннера. Обязательно попробую!

[arslanaliisaev]

Все очень понятно и прекрасно !!! Пожалуйста не останавливайся

[jliczlr]

Я готовлюсь к WSR и ты мне очень помог спасибо все очень понятно мало воды, но в CSS нужно побольше уделять внимания объяснять что к чему. и меньше тому как работает софт..

[ygwnjjk]

Круто! Спасибо, все понятно. Не сразу получилось, архив помогает разобрать то что не понятно!

[largerine]

Чел ты просто лучший!!! Задолбало через JS делать это, а тут твой видос.

[timmyyang]

Делаю курсовую по верстке. Очень помог, большое спасибо. Всё по существу, доходчиво. Успехов тебе)

[maksbarkiov]

дядя, спасибо тебе огромное, подписка на вечно!!!
писал код, под паузу, потом увидел, что есть архив) спасибо)))

[badanchbadanch]

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