Тёмный

Пишем простой слайдер на JS и CSS! 

WebDev с нуля. Канал Алекса Лущенко
Просмотров 133 тыс.
50% 1

Курс JS 2.0: itgid.info/course/javascript-2
Курс HTML для JS разработчиков: itgid.info/course/html
Остальные курсы: itgid.info/
Телеграмм канал: t.me/itgid_info
Код на github: github.com/itgidinfo/simple_s...
Применяем JavaScript для создания простого слайдера

Опубликовано:

 

11 янв 2021

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 183   
@user-hd4hg6wd5v
@user-hd4hg6wd5v 2 года назад
У тебя талант объяснять. Очень качественный контент, коротко и ясно без лишней воды, мне кажется даже далёкий человек от программирования сможет понять без проблем. Спасибо большое за уроки!
@YaroslavEx
@YaroslavEx Год назад
соглашусь, приятно слушать.
@seron4206
@seron4206 Год назад
@@YaroslavEx Привет, давно изучаешь js?
@trendsgallery
@trendsgallery Год назад
Я посмотрел 4 урока как сделать слайдер конкретно на Js и Css, без доп. библиотек и это единственный понятный ролик, который я смог реализовать в последствии и осознать всю конструкцию. Спасибо вам, Алекс Лущенко!
@user-ik4vu6rc2x
@user-ik4vu6rc2x 3 года назад
Насколько же понятно вы объясняете, просто лучший
@user-xy5vm6rv5r
@user-xy5vm6rv5r 2 года назад
ВСЕ ЧОТКО, то что надо без воды!!!!!Люблю! Спасибо, всегда выручают ваши простые уроки и js не кажется таким злодеем.
@jinke5935
@jinke5935 3 года назад
О, прикольно! Всегда интересно смотреть на Вашем канале такие мини-видео-лайфхаки.
@zimabezsnega
@zimabezsnega 2 года назад
Спасибо большое, как же приятно смотреть такие видео всё быстро, понятно , без воды и главное что работает спасибо вам большое!!!
@beduingreen
@beduingreen 2 месяца назад
БОЛЬШОЕ спасибо вам! Сколько видео посмотрел,никак не могу понять механизм слайдера.Только вы смогли мне доходчиво обьяснить сложное для меня тему! Подписался и поставил лайк!
@Arks_kr
@Arks_kr 2 года назад
Вы супер! Всегда всё получается с первого раза! Всё понятно и доступно объясняете. Учусь на front-end разработчика и Ваш канал очень помогает мне справляться с трудностями. Спасибо Вам! Здоровья!
@user-wg6lw4uz8p
@user-wg6lw4uz8p 3 года назад
Всегда приятно смотреть и учиться у вас. Спасибо большое.
@pyndykmisha
@pyndykmisha 2 года назад
В основном, очень даже хорошо! Нашел то что искал, все просто и понятно, к примеру другие люди обьясняют не понятные команды и функции новичкам, а тут прям не к чему придраться! СПАСИБО!
@PreLeks
@PreLeks Год назад
Не зря подписался: чётко, быстро, минимум бла-бла-бла, всё по делу. Спасибо, что Вы есть!!!
@user-ve7tx3ud6n
@user-ve7tx3ud6n 2 года назад
Спасибо. Здоровья Вам и процветание каналу.
@ThevideOoLoadeR
@ThevideOoLoadeR 3 года назад
Я просто в шоке от такого грамотного разъяснения. После просмотра урока JS мне показался не таким уж и страшным. Спасибо))
@user-sy4it3pn3b
@user-sy4it3pn3b 3 года назад
Я в восторге от видео, все очень понятно и доступно объяснено
@yatut4467
@yatut4467 3 года назад
Спасибо большое. Целый день искал примеры слайдера с анимацией, у всех громоздкие примеры по 200+ строк js кода при чем итоговый результат не лучше, а у Вас все кратко и доступно.
@user-kb4le4me2d
@user-kb4le4me2d Год назад
Спасибо! Всё просто и доходчиво, без лишних нюансов. Новичкам особенно актуальная такая подача информации
@spicyeric9063
@spicyeric9063 4 месяца назад
От души. Теперь всё понятно . Написал свой первый слайдер.
@DmSychov
@DmSychov 3 года назад
Алекс подписался на ваш канал Лучшего преподавания программирования я не видел! Спасибо
@chev_chelios
@chev_chelios 2 месяца назад
Супер! Огромное спасибо. Делаю сайт, все делаю на чистом js, не в первый раз выручаете.
@MobileLegendsImmortal
@MobileLegendsImmortal Год назад
вы просто супер! столько перерыл, вообще самообразование это такая___ не верьте никому, что информации в интернете куча, вам не узнать на сколько она актуальная пока не узнаете))))) с куратором, преподом, учителем вы сразу учите как работает, а сами вы будете вторым Эдисоном и найдете тысячу способов, которые не работают. Только не надо умничать, типо опыта больше, мне как-то не нужно к опыту знать, что кота в микроволновые греть нельзя. В общем я к чему. эти 16 минут просто были как мана небесная среди всего конвента, посмотрю обязательно следующий о динамическом слайдера, что мне очень нужно.) Вы супер! А остальные учитесь с кем-то, не тратьте время.
@user-iy4cy5hl6j
@user-iy4cy5hl6j Год назад
Спасибо вам огромное за столь понятное объяснение!
@jr9032
@jr9032 3 года назад
Супер! Огромное спасибо! Просто, функционально, доступно для понимания новичку и что самое главное без "черной магии")))
@pastyrMisha
@pastyrMisha 3 года назад
Шикарно! Просто шикарно! Спасибо Вам!!!
@agataageeva424
@agataageeva424 3 года назад
Спасибо вам большое, Алекс) слайдер, JS, css
@MrFussy333
@MrFussy333 3 года назад
Лучший видеоролик о слайдерах на чистом js! Удачи автору!!!
@the-tata
@the-tata 2 года назад
Обожаю ваши объяснения. Вы учитель от Бога. Большое спасибо.
@kov1k468
@kov1k468 Год назад
Самое простое объяснение, спасибо за ваш труд !
@niceman5890
@niceman5890 Год назад
Спасибо, хорошо объяснили, что такое слайдер.
@movieschanel8370
@movieschanel8370 3 года назад
Всех с 2021 годом. Интересно было посмотреть такой или примерно слайдер с подгрузкой контента из базы данных
@user-jn5cb4zb7f
@user-jn5cb4zb7f Год назад
отлично - смотрю 5-ое видео про слайдер и только тут все стало понятно) спасибо!
@Anatoli-bq1pe
@Anatoli-bq1pe Год назад
Этот канал просто находка) Благодарю!
@st0nedcreature17
@st0nedcreature17 Год назад
Огромное спасибо, Александр, отличное объяснение, обнял.
@user-dt8wc6fy3e
@user-dt8wc6fy3e 3 года назад
Круто, жду следующий ролик!
@user-nb1is5wc4k
@user-nb1is5wc4k Год назад
Спасибо! Очень понятно и доступно. Получилось реализовать в моём учебном проекте.
@user-Natalia11
@user-Natalia11 3 года назад
Спасибо за ваши уроки. Доступно и понятно даже новичкам.
@itgid
@itgid 3 года назад
Спасибо - именно в этом и вижу цель канала - учить начинающих.
@denysivashchenko2080
@denysivashchenko2080 3 года назад
@@itgid И у Вас это великолепно получается ) я как ваш студент могу это подтвердить )
@user-nb8od6jd6k
@user-nb8od6jd6k 2 года назад
Какой же ты крутой! Все понятно, весь код объясняешь!
@maksmaksim4803
@maksmaksim4803 3 года назад
Жду с нетерпением дальше уроков по слайдерам
@user-cd1sr5sx2r
@user-cd1sr5sx2r 3 года назад
Спасибо, что вы делаете из магии простые вещи!
@StudyMan-ul1ls
@StudyMan-ul1ls Год назад
Видео достойное лайка! Всё четко и понятно! Это как раз то, что нужно для новичков!
@BigTrick1988
@BigTrick1988 3 года назад
доступно и понятно. Спасибо )
@happyhomo4423
@happyhomo4423 3 года назад
как всегда лучшая подача материала, очень было бы интересно посмотреть как делать окна которые можно скрыть и развернуть при нажатии кнопки
@veranikamalazhavaya1379
@veranikamalazhavaya1379 3 года назад
Спасибо за доступное объяснение!!!
@nataliyataranina57
@nataliyataranina57 Год назад
Боже мой!!! Как здорово, что я Вас нашла!!! огромное СПАСИБО!!!, за очень доступное и подробное объяснение!!!
@digitalturkistan1857
@digitalturkistan1857 Год назад
Наташа Таранина меняет профессию
@1_dimasik_1
@1_dimasik_1 3 года назад
Это самое простое и доступное видео про слайдер, которое я видел
@alexzav1327
@alexzav1327 Год назад
Спасибо за видео! Очень просто и понятно. Я пытался сделать слайдер самостоятельно и всё не мог догадаться как отключить видимость слайдера за пределами родительского блока )
@andrewgrimes9284
@andrewgrimes9284 3 года назад
Благодарю за понятный урок :)
@NIkolaiDu
@NIkolaiDu Год назад
спасибо огромное! получилось! а главное - понял как это вообще работает)
@s_romanov_niko
@s_romanov_niko Год назад
Очень подробно и просто! Спасибо!
@user-sx4bw2co3t
@user-sx4bw2co3t 9 месяцев назад
Очень круто объяснено!!
@user-pp2xd7ii9i
@user-pp2xd7ii9i Год назад
Спасибо большое! Все предельно понятно. И все работает!
@rk_projects
@rk_projects 3 года назад
Спасибо, самый быстрый способ, везде городят кучу кода и тд, у вас все просто и понятно. Давно подписан на ваш канал, с помощью ваших уроков пишу интернет магазин, вы вносите неоценимый вклад 👍 Подскажите ещё один момент, насколько сложно будет добавить отслеживание Touch событий на слайдере, чтобы работал на смартфонах простым свайпом по фото влево и вправо.
@itgid
@itgid 3 года назад
не сложно совсем. Этот слайдер даже на смартах с тачем сработает. А swipe требует дописать пару функий.
@rk_projects
@rk_projects 3 года назад
@@itgid Если будет в дальнейшем ваш урок с этим, то будет супер! Спасибо вам!
@vlad-zf1ev
@vlad-zf1ev 3 года назад
супер, отличная подача материала.
@flogger2367
@flogger2367 3 года назад
Привет, хороший канал в плане подачи, голоса и знаний, особенно для падаванов и джунов... Как всегда лайк
@ArabicLang.online
@ArabicLang.online 3 года назад
Александр, спасибо за классные уроки по слайдерам! Но есть вопрос, как сделать автовоспроизведение? Пробую через setInterval и clearInterval, при загрузке страницы проигрывается, но если руками переключить, то перестает проигрываться. Если не использовать clearInterval, сбивается время (сбой или наложение интервалов)... В общем, голову ломаю.
@yusif4183
@yusif4183 3 года назад
Очень крутое видео. Интересно и полезно.
@artemkamyshenkov3492
@artemkamyshenkov3492 Год назад
спасибо Вам большое за урок!
@dmitriystoyanov933
@dmitriystoyanov933 3 года назад
Давно уже прошёл все эти начальные темы изучения фронта, но всегда круто по Вашим урокам освежить всё в памяти при необходимости, очень доступно и понятно. Один из лучших каналов по теме!
@DmytroTorop
@DmytroTorop Год назад
Работаете во фронте?
@dmitriystoyanov933
@dmitriystoyanov933 Год назад
@@DmytroToropда
@ValeriyLarin
@ValeriyLarin 3 года назад
Вот она магия!) спасибо
@igoryavorskiy5297
@igoryavorskiy5297 Год назад
Очень понятно спасибо)
@mator987
@mator987 Год назад
Спасибо за видео!!!
@mikewazowski7526
@mikewazowski7526 3 года назад
Очень полезно, спасибо!
@jonjonsan1036
@jonjonsan1036 Год назад
Thank you very much!)
@lotvaplotol5578
@lotvaplotol5578 3 года назад
Очень интересует слайдер с фото разных размеров, автору здоровья и процветания в Новом году!
@nso655
@nso655 3 года назад
Спасибо) То что нужно!
@itgid
@itgid 3 года назад
Спасибо!
@user-rw7lz8jd9o
@user-rw7lz8jd9o 2 года назад
Имба! Спасибо за и информацию
@mind150
@mind150 3 года назад
Спасибо. Учусь у вас 5 дней! Это лучшее, что есть в онлайн обучении!! Откуда у вас на все хватает времени?))
@itgid
@itgid 3 года назад
Да просто не сплю Уже 3 года.
@mind150
@mind150 3 года назад
@@itgid а так можно?))
@mickzc7064
@mickzc7064 3 года назад
Сенсей ты лучший !
@v_katkov
@v_katkov 10 месяцев назад
Крут! Хорошо пояснил!
@major_2143
@major_2143 3 года назад
Полезный совет: 13:34 мин. видео. Для перемещения строк по документу вверх или вниз, нужно кликнуть ЛКМ между любыми элементами нужной строки(курсор мигает) и удерживая левый Alt перемещать стрелками вверх или вниз. Сделал свой слайдер по Вашему уроку с десятком картинок - получилось.
@lorentte77
@lorentte77 2 года назад
спасибо большое помогли )
@user-iz3jn9xe6q
@user-iz3jn9xe6q 3 года назад
Спасибо))) Очень понятно)))
@askat25
@askat25 3 года назад
Спасибо! Класс!👍👍👍👍
@alltheworldsastage.11688
@alltheworldsastage.11688 2 года назад
Спасибо, супер видео. У меня все получилось. Подскажите у Вас есть видео где вы подробно рассказываете про все css?
@Alex-bo9wt
@Alex-bo9wt 2 года назад
От души, спасибо!!)))
@user-zf7ew9ml2u
@user-zf7ew9ml2u 3 года назад
Добрый день. Планируете ли выпустить видео про паттерны и соответственно курс в котором будет over туча задач для их применения?
@aleksarfin4419
@aleksarfin4419 Год назад
Спасибо за урок, смотрел много видео но только с этим методом всё просто и понятно. Можете пожалуйста подсказать как сделать чтобы при переходе с последней картинки не было перелистования через все картинки а сразу переходила на первую
@user-ei6ft8ov5t
@user-ei6ft8ov5t 2 года назад
Большое спасибо!
@antotepoluektov
@antotepoluektov Год назад
Супер!
@geroin6294
@geroin6294 2 года назад
Прикольно. Получилось)
@denys6168
@denys6168 3 года назад
ну вот то что надо же! спасибо
@user-nc5uu7ut1t
@user-nc5uu7ut1t 2 года назад
спасибо за видео
@nodirayakubova6395
@nodirayakubova6395 3 года назад
Ура,класс 👍👍👍👍
@anna40637
@anna40637 3 года назад
Ох, спасибо вам огромное
@macarov9658
@macarov9658 Год назад
Вы прекрасны
@awenn2015
@awenn2015 3 года назад
Я вроде не такой уж и новичок но ни разу не пробовал писать слайдер, уже все сделал и лайтбокс адаптивный и галерею динамическую и смену изображения при наведении для товарки а слайдер так и не пробовал , теперь думаю сделаю что-нибудь интересное )) спасибо за урок
@hoodrychs1374
@hoodrychs1374 2 года назад
Супер))
@mikhailurban1222
@mikhailurban1222 3 года назад
супер!
@joshuakelly6045
@joshuakelly6045 10 месяцев назад
Блестящщее!!!
@sergeygetman1973
@sergeygetman1973 3 года назад
не думал что на CSS так можно юзать JS...лайк однозначно, а новичкам можно в качестве портфолио на git.hub заливать, что собственно я и сделаю ))
@raff_m_d6971
@raff_m_d6971 2 года назад
Огромное спасибо
@jahongirmusayev658
@jahongirmusayev658 3 года назад
Спасибо!
@senianga1
@senianga1 Год назад
Очень полезно и не сложно в в исполнении, но если добавить ещё одну картинку..... всё рассыпится... , на CMS такое уже не натянешь, ну или с большими ограничениями. Для простого десктопного сайта , или лендинга, самое то! Лайкос в общем!
@yatvoy457
@yatvoy457 2 года назад
Бля как же просто вы объясняете…респект
@OrhanDavidov
@OrhanDavidov 3 месяца назад
Скажите пожалуйста, как сделать чтобы ширина общего блока была не только для одной картины, например для 5 ти ?
@jurimudry62
@jurimudry62 3 года назад
Красиво.
@albus2156
@albus2156 2 года назад
Подскажите, что надо поменять в коде, что бы слайдер работал вертикально, а не горизонтально?
@_Iokanaan_Marusidze_
@_Iokanaan_Marusidze_ 3 года назад
I like it 👌
@mEden-xw2ke
@mEden-xw2ke Год назад
спасибо
@scott860racing
@scott860racing 2 года назад
Добрый день. Подскажите пожалуйста, а как два их запустить на одной странице? Названия классов менял, но не получается(
@exploringtheworld8780
@exploringtheworld8780 3 года назад
Круто👍👍👍👍👍😁😁😁👍👍👍👍👍
Далее
Адаптивный слайдер на JavaScript
23:24
УТОПИЯ ШОУ В КИНО
2:36:54
Просмотров 316 тыс.
Бургер меню - просто. HTML + CSS + JS
22:34