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

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

все картинки вышли на одном слайде, что делать?(на остальных слайдах пусто)

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

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

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

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

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

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

Вот 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 }

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

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

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

Все очень круто, и главное понятно)

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

Вообще все супер!)ЛАйк)Нравится как объясняешь)true man

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

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

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

Спасибо, помогло решить задачу!

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

Спасибо !!!! Четко ясно и понятно)

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

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

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

Спасибо. Как раз то что я искал

Спасибо, даже у меня, совсем начинающей получилось с первого раза!

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

Давно искал видео с комментариями в коде. Для новичков самое то.

Нихрена не понял в этих гребанных слайдах и слайды не получились! А так красава только надо было показывать как браузер изменяется, но код огромный просто! Время угробил зря....

Огромное спасибо, помог разобраться.

Спасибо за урок!!!

отличный материал, спасибо!

Спасибо огромнейшее,очень долго искал как ето зделать.

Спасибо за полезное видео!!

Большое тебе спасибо хорошо объяснил больше бы таких людей и музыка хорошая

Подскажите пожалуйста, как включить отображение библиотеки папок твоего сайт, как у автора, слева от самого sublime?

Полный ноль в html и сss что мне делать если у меня на одной странице дожно бить 2 или более слайдеров?

спасибо помог хорошо и понятно объясняешь с меня лайк

У меня одного вопрос откуда взялся id slides? Он же его в html не прописывал

крутой чел, оставил исходники в описании , благодарен

Спасибо огромное !

архивировать в RAR'е в 2017 году - это какой то прикол! ))

Получилось! Спасибо

Ждал более подробного объяснения что к чему, а так спасибо

спасибо за урок!!!!!

Привет! Очень хорошее видео. Я вот ищу информацию как бы сделать слайдер из фона. То есть, пример: Есть 5 картинок, они для фона сайта, и нужно чтобы они плавно уезжали в бок, то есть, показана первая картинка на фоне, проходит 5 сек, она уезжает плавно влево, а за ней стразу же вторая приезжает и так по кругу. Листались чтобы автоматически. Как реализовать? С JS или без - без разницы. Буду очень благодарен за помощь.

Спасибо! Конечно, урок понравился. Спасибо за исходники. С меня подписка. Единственное, фоновая звуковая дорожка, кажется, должна быть потише.

почему когда я хочу создать еще один слайдер(я всё копирую повторяю и меняю везде классы, и css и html) все боком идет

большое спасибо ))

Спасибо вам огромное!!! ! Подскажите пожалуйста, как сделать так, чтобы слайда менялись автоматически через сколько-то секунд??? Буду очень благодарен !

Спасибо большое!

С пятью слайдами получается все хорошо, а с шестью не работает( в чем может быть косяк?

Вставил слайдер в готовый сайт но он не на все строку и с небольшим отступом везде стоит height=100% где нет ставлю если это хоть чуть чуть свзано с картинками но не работает не на все строку

Молодец, спасибо!

в css почему вы разделили первый слайдер и второй. почему бы не написать все вместе?

Сидела писала пол часа! И НИФИГА

Спасибо большое!!!!

Как сделать так, чтобы я мог менять не просто величину слайдера, а отдельно ширину и высоту ?

Привет, а как сделать что бы переключался автоматически слайдер?

Очень полезное видео для тех, кто хочет реализовать слайдер на css+html без использования js. Только не понял один момент: для чего нужен инпут, который отвечает за максимальную ширину слайдера? Можно же вставить это свойство в стиль нужного блока, без всяких условий с инпутом, который скорее уже декоративную роль выполняет (хотя он все равно скрыт). В общем, мне это показалось лишним)

Вопрос . А как разместить несколько таких ?

Спасибо за ролик! Но в html5 для картинок корректнее, наверное figure использовать а не article. Если я ошибаюсь буду признателен если вы мне поясните, спасибо!

Всем привет у меня не отображаеться стрелки значит у меня проблемы с id controls?

можно вместо картинок сюда блоки запихать с текстом и картинками по разным углам слайдера??

Круто, вопрос, как сделать автоматическое перелистывание?

Подскажите пожалуйста почему у меня все работает а изображение не листается?

У меня вроде всё получилось. Только стрелки не отобразились. Кнопки были как у тебя но изображение были рядом друг с другом и маленького размера, нажав на кнопки ничего не происходит кроме движение точки. Помоги пж

Спасибо, помог

Одна маленькая ошибка: кодировка устанавливается в начале head, перед title. Текст в title ведь тоже должен быть в нужной кодировке.

Спасибо )

все получилось) спасибо. мало объяснений во многих моментах непонятно откуда берутся числа. например: #slides artice { width: 20%; - почему 20%? пытался другие цифры поставить и все сбивается } #slides .image { width: 500%; почему 500%, а не 100%, если изображения 100% } и таких моментов много

Ты лучший удачи тебе!!!! желаю 1000000000000000000 подписчиков!!!!

как сюда добавить авто переключение?! заранее спасибо

Отличный слайдер! Комментарии в CSS очнь облегчают понимание! Как к каждому изображению добавить надпись вверху (поверх изображения)?

Как вставить текст вместо картинок? почему-то не получается

У меня дублируются вверху нижние кнопки. Подскажите пожалуйста как убрать это

Дикция хорошая, голос приятный, фоновая музыка и уроки вещи -> НЕ СОВМЕСТИМЫЕ.

День добрый, подскажите, пожалуйста, как сделать сладер только на два слайда? делаю все по примеру, но пропадает левая стрелка. спасибо!

интересно показано

Не открываются ссылки в описании:(

4:01 как он курсором сделал несколько нажатий на разных строках и удалил их сразу все? подскажите хоткей, и как называется этот приём) спасибо

подскажите пожалуйста как сделать его автоматическим!

автор огромное спасибо я два дня искал ролик на эту тему)) с меня лайк потписка.

Друзья а почему article для левого переключателя? прошу расскажите кто просветленный)

Я сделал на 17 картинок но почему то он их в столбик ставит

Вопрос. Пытался расширить слайдер на 14 фотографий, но не получилось. Вместо одного изображения показывает 2 или 3 и дальше 5-й слайда не листает, тоесть листает но там пусто.

Спасибо

Сделайте только на CSS кнопку плавной прокрутки вверх, которая невидна, но появляется при прокрутке окна вниз.

Классно подано, сделал у себя на сайтике такой))) А возможно ли всю эту конструкцию упаковать в модальное окно вызываемое по клику на изображении? или для CSS это уже перебор?

Видео отличное автору респект !!! Добрый вечер не смогли бы вы мне подсказать, как такой же слайдер сделать на 55 картинок ? Это вообще реально на такое количество сделать ? На 5 картинок всё ок а вот начинаю добавлять и всё в кашу ((

можешь что нибудь выложить с тем что бы переключались автоматически?

почему у меня не распаковывается архив?

не подсвечивается зеленым #slider.что делать?

спс)

А какого размера должны быть фото для слайдера?

а нельзя за место id в div писать class?

Помогите пожалуйста, когда я написал идентичный код, и поставил на свой шаблон, то случилось непредвиденное... У меня не отображаться стрелки, я как бы могу на них нажимать и анимация происходит. Проверил код на наличие ошибки, её не нашёл. Решил отдельно вывести слайдер, стрелки появились. Может кто-то сталкивался с такой проблемой?

Очень приятное видео, спасибо за ненавязчивую музыку на фоне, отсутствие косяков и хорошую дикцию. Круто, что есть шутеечки =)

Код работает,но при добавлении в него новых частей,например не 5 слайдов,как в видео,а больше,то все картинки совмещаются и все

Как сделать такой слаид но с javaScript