Слайдер на чистом CSS без JavaScript
HTML-код
- Опубликовано: 25 июл 2024
- 🔥 17 ноября стартует интенсив "Современная верстка сайта"
✅ Записаться: frontendblok.com/marathons/cs...
📚 На практике научитесь использовать CSS функции: clamp(), min() и max()
ДЕМО и исходник файла SCSS:
boosty.to/annblok/posts/07288...
Видео про clamp() - • ❌ Медиа-запросы не нуж...
Таймкоды:
00:00 Вступление
00:13 Обзор разметки
01:32 Общие стили
07:00 Работа с clamp()
08:26 Интенсив по современной вёрстке
09:01 Работа с clamp()
13:33 Работа с анимацией
17:22 Как считать автоматически?
17:41 Работа с анимацией
🔵 Telegram - t.me/frontendblok
🔵 Чат Telegram - t.me/frontendblokchat
🔵 Instagram - / annblok
🔵 TikTok - / annblok_webdev
🔵 Дзен - zen.yandex.ru/annblok
🔵 ВК - tpverstak
🔴 Обучение - frontendblok.com
#css #javascript #frontend 
Развлечения
Нравится, что вы помимо теории ещё и всё демонстрируете на деле, то есть на практике! Так проще понять.
Невероятно крутой способ создания слайдера без JavaScript. Просто мастер-класс.
Анна, спасибо большое за то что делитесь своим опытом и знаниями
С вами почти любой урок простой, подробно всё объясняете, кратко. Благодарю
Спасибо, что делитесь такими уроками
Вы отличный специалист! Учусь смотря на то как вы делаете и сама набираюсь опыта😊
Объяснения занимают время. Хотя ничего слишком сложного нет. Большое спасибо. Лайк!
Огромная благодарность автору за подбор материала.
Спасибо за подробное объяснение каждого шага. Теперь могу сделать свой слайдер без проблем.
Спасибо за такой подробный урок, с вами заниматься легко и удобно, всё объясняете в доступной форме и даёте дельные советы.
Понятный, грамотный урок специалиста. Спасибо.
Отличный понятный доходчивый урок. Тема востребованная. Многим будет интересно
Очень полезное видео, как раз то что искал👍💯
Видео очень классное, хочу больше таких видео. И это видео должен посмотреть каждый
это действительно полезный информационный видеоконтент, мне очень нравится это видео
Качественный обзор, сразу видно настоящий профессионал своего дела
шикарное обьяснение , все просто и классно , спасибо
спасибо, что раскрываете нам такие сложные технические моменты
ОБАЛДЕТЬ какая красота. это шикарно, я в шоке )))))
Довольно дельные советы и неплохая методика, нужно будет протестировать такой способ, думаю все должно получиться.
Спасибо за уделенное внимание деталям. Теперь у меня есть крутой слайдер без JavaScript.
спасибо за ваши объяснения сложных технических моментов
Очень полезное, информативное видео.
Замечательный способ создания слайдера без использования JavaScript. Великолепный урок.
Очень интересное и полезное видео. Хорошо объяснила мне понравилось вы молодец
Крутяк!
Очень полезный навык для работы фрилансера спасибо за объяснение
Всегда интересно узнать о очередных новинках и быть в курсе событий
Вы очень приятная девушка, с вами любой урок становится простым, вы подробно, но в то же время кратко и информативно объясняете.
А вот работа с анимацией мне показалась весьма интересной!
Спасибо!
Спасибо за урок. Очень помогли, не хотелось подключать сторонние плагины.
Не знаю как слайдеры, но видосики девченка создавать отлично умеет, и тема, и картинка кликбейт, и ваще 😊 иногда что-то новенькое даже узнать можно СПАСИБО ❤
такой контент вижу впервые в ютубе в ролике
Ты такая приятная девушка, с тобой любое занятие становится легким - ты разъясняешь все детально, но при этом кратко и информативно. Слайдеры на CSS обладают определенными преимуществами перед слайдерами на Javascript. Одно из них - это скорость загрузки.
не просто новичку изучать язык уже понял на себе)
Прикольно, создай видео пожалуйста про новый GPTs
Видимо следующий шаг это использовать еще и Scroll-driven Animations )
Как же это все сложно на самом деле для меня. но очень понравилось и заинтересовало
Анна вот если честно то я понимаю лишь 10 часть того что вы говорите но все равно почему то слушаю)))
Пиар менеджер функции clamp 😘❤️
Амбассадорство вышло на новый уровень
nice vedio 🙂
сохраню себе, уже есть идеи, где это применить
Посмотрел видео, сам учу фронт недавно и пропала мотивация как то))
Ниху@ не понятно, но очень интересно!
Ана вы прекрасны, как вы с этими функциями так ловко, видно руку мастера!!
Почему пропала мотивация?
Если Ты учишь "фронт", то тебе это никак не поможет, это из разряда троллейбуса из буханки хлема, сделать можно, но пользы мало
@@annblok_webdev не воспринимай в серьёз, просто я за 6 месяцев неторопливой учёбы думал что я почти гуру, а тут ты, со своим замечательным контентом, который каааак опустил меня на землю!
Но я рациональный молодой человек и это была шутка!
На самом деле твой контент мотивирует продолжать учиться и не сдаваться, что бы стать таким же крутым как ты ❤
@@MrTAZAQ А что тогда нужно учить?
@@annblok_webdev а расширение в VS коде - LiveShare часто кто-то использует при совместной работе над проектом ?
Well, for general development, it'll do. But how practical it is and who will use it for sliders, I think no one).
А как можно стопнуть анимацию по какому нибудь пользовательскому событию, например вводу мыши?
Вряд-ли будет достаточно убрать animation, всё скакнет к исходной точке.
Но если доработать этот момент, то супер.
Ну для общего развития сойдет. Ну а на сколько это практично и кто будет этим пользоваться для слайдеров, думаю ни кто)
Если не требуется управление кнопками и у пользователя не будет причин специально прокручивать этот слайдер, то вполне. Например, если это какой-то декоративный элемент, демонстрирующий фото для портфолио.
Так если блоки имеют значение 500 пикселей, это как раз таки означает то, что VW зависит от ширины экрана. Верно.
Вот и стоило оно того?)) JS-ом вообще не проблема же
Недостаточно знать только HTML и CSS,чтобы создать сайт,он получится статичным.
Интересный пример и реализация. Однако явно для слайдера такое использовать нельзя. Как минимум для слайдера с контентом особенно кликабельным. Как визуальное украшение это отличное решение
У меня вопрос. Зачем все это? Простой js и все. Ничего проще же нет
Слайдер на чистом css - это же ненужно будет подключать сторонние дополнения. Я считаю, что это прогресс. Теперь одним дополнением будет в проекте меньше.
Интересно было посмотреть...но, к сожалению, для того, чтобы понять и принять все, мне нужен не один урок. Это больше молодым...😢
Это не вертикальный слайдер, а вертикальная анимация карточек... где функционал переключения слайдов по нажатию? Где остановка прокрутки при наведении? Где прогресс бар для слайдов?
Душно стало , чувак ошибся человек , необязательно высерать после этого такую ересь в комы
@@fantomchik1183 человек не ошибся а не сделал то о чем говорила, сделать то о чем я говорил на чистом CSS можно! Душно тебе стало открой форточку
Спа
Если хотите обойтись без JavaScript,то можете использовать эту карусель...
О чем урок, о том как иконку поставить? Или как ссылки стилизовать ... Ты ЗАНУДА...!
Как можно было соединить красоту с программированием? За таких девушек хочется выходить замуж
Лучше JS. Не надо себя так мучать. Это же потом другому разработчику 100% переписывать
🔥🔥🔥