Тёмный

Бесконечный слайдер на JavaScript 

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

Курс JS: js.itgid.info
Плейлист: goo.gl/8qiD5S
Мои курсы: itgid.info
Телеграм: t.me/jsrules

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

 

21 окт 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 143   
@ОлегБыков-р3с
@ОлегБыков-р3с 5 лет назад
Супер, самый нормальный наставник. Всегда объясняет каждый шаг, а не "создалили это то то тото это вот это сейчас это теперь это"!))
@CreatorDreamer
@CreatorDreamer 10 месяцев назад
Спасибо за проделанную Вами работу, спасибо за уделенное время! У вас талант объяснять!
@БулатШарипов-д9с
@БулатШарипов-д9с 3 года назад
Именно то, что мне нужно было. По началу этого видео я понял принцип работы подобных слайдеров, что для меня было не понятно. Спасибо за подсказку!)
@alexdenuke
@alexdenuke 2 года назад
Пожалуй идеальный слайдер который я видел, годно !
@АлександрНастыченко-с9с
Полезный урок про слайдер на js. Рекомендую!
@mikhail_shokun
@mikhail_shokun 2 года назад
спасибо, сейчас так же найду у вас на канале чтобы можно было и вправо листать, и чтобы он сам листался по таймеру, ну и стрелочки с кружечками добавить)))
@illiabulgakov2013
@illiabulgakov2013 6 месяцев назад
Спасибо за вашу работу, все чётко и понятно объяснили!!!
@itgid
@itgid 6 месяцев назад
Рад!
@VictorYushin
@VictorYushin 3 года назад
Супер! Именно профи - наставник.
@СейтекБегалиев
@СейтекБегалиев 3 года назад
Я *тот который заметил опечатку но не исправил ее потому что сомневался в правильности выбора: Я ВСЕГО ЛИШЬ СЛЕПО ВЕРИЛ ТЕБЕ!!1!! А ТЫ ПОСМЕЛ ТАК НАГЛО ОБМАНУТЬ МЕНЯ!!!!!
@itgid
@itgid 3 года назад
Увы мне
@Krypton2088
@Krypton2088 3 года назад
Что за опечатка?? И почему когда меняешь фото картинки не отображается???
@dimd8824
@dimd8824 5 лет назад
хорошее видео! как вариант вместо setTimeout можно использовать событие transitionend
@itgid
@itgid 5 лет назад
Так даже лучше будет! Спасибо за наводку.
@АсланКосшанов
@АсланКосшанов 4 года назад
Да, только потом слушателю нужно будет установить третьим параметром флаг once:true, чтобы при каждом клике не генерировался очередной слушатель
@ІванШвець-л2ь
@ІванШвець-л2ь 3 года назад
Александр, спасибо Вам за урок. Хотелось бы посмотреть как это осуществить на две кнопки - вперед,назад.
@gameplaynmn4696
@gameplaynmn4696 2 года назад
+
@xxRedManxx100
@xxRedManxx100 Год назад
+
@Sashad2003
@Sashad2003 2 года назад
Отличный урок. Именно то что мне нужно было. Спасибо 👍🏻
@WinchesterD
@WinchesterD 2 года назад
Спасибо за урок, помогает решить мою задачу.
@daredevil_37
@daredevil_37 2 года назад
велике спасибі за цікавий та практичний урок)
@ByteMod
@ByteMod 5 лет назад
Я думаю в современных реалиях использовать query селекторы и присваивать функции на "on-события" это, скажем так, непрофессионально. Намного лучше использовать альтернативы в виде getElement.. и addEventListener, потому что при использовании query-селекторов по сути парсится весь документ, а при использовании getElement нужный элемент берется из "дерева узлов", который современные браузеры делают на лету. Если в присвоенной на on-событие функции пойдет что-то не то, например она будет долго выполнятся, то на время выполнения заморозится весь документ, а с использование AddEventListener такого не будет. Вы конечно можете сказать, что это сделано "для поддержки старых браузеров", но зачем тогда использовать let, вместо var? Забавно смотреть на такие неграмотные примеры от людей, которые продают курсы.
@laboptyka3706
@laboptyka3706 4 года назад
урок как всегда интересный, качественный и понятный! Спасибо Вам огромное за время и труд которое Вы тратите на уроки для нас!!!!))) Вы лучший преподаватель!!!
@AndrewRubanov
@AndrewRubanov 2 года назад
Отлично объяснил, легко и понятно для новичка!
@bulatdc3004
@bulatdc3004 5 лет назад
очень интересно увидеть урок по свайпу на слайдере, везде где смотрел, только через библиотеки, на чистом JS не находил
@igorkuzenkov8939
@igorkuzenkov8939 4 года назад
Вы очень доступно и понятно объясняете, за это огромное спасибо. Учусь на itgid, по вашим видио. Решил приобрести необходимые мне курсы. Также хочу добавить, Vue.js и Angular - хотел бы видеть на itgid. Что я бы изменил в слайдере: слайдер сам должен переключать изображения (по тайму).
@viktormartynov7802
@viktormartynov7802 3 года назад
Коммент в поддержку. Отличный материал!
@DerAleksey
@DerAleksey Год назад
Хорошее решение, единственное хотелось бы оптимизировать это, на действия по клику кнопки и в обратном направлении.
@WebSP-q7e
@WebSP-q7e 5 лет назад
Классное видео! Спасибо!:) Делал бесконечный слайдер через индексы слайдов, а тут через удаление и вставку, круто!:) Будет здорово, если появится урок по слайдеру через индексы слайдов:)
@ВикторОрлянский-я5ц
Супер! Спасибо за урок!
@cocochen8349
@cocochen8349 5 лет назад
Спасибо! Адаптивность слайдера актуальная задача, было бы здорово когда-нибудь увидеть вашу реализацию.
@BROnik
@BROnik 5 лет назад
#slider{ width: 80vw; height: 80vw; position: relative; max-width: 500px; max-height: 500px; margin: 0 auto; margin-top: 80px; /* overflow: hidden;*/ } .slide{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: all ease 0.5s; }
@denisb8476
@denisb8476 2 года назад
Отличный урок!
@Сергей-э8о6м
@Сергей-э8о6м 4 года назад
Ребята, а как сделать такой же слайдер, но чтоб в онке отображались 3 изображения а не 1? Автору спасибо за его уроки.
@angrycatstudio2816
@angrycatstudio2816 5 лет назад
Спасибо за то, что я вас нашел. Это топовый контент.
@ИванКанищев-о8л
@ИванКанищев-о8л 4 года назад
Александр, спасибо! Очень полезный контент. Я потратил много времени, чтобы заставить слайдер листаться вправо. Но, к сожалению, не получается. Может подскажете как это сделать? Заранее спасибо!
@capy7773
@capy7773 5 лет назад
Это то, что я искал! Спасибо
@alexviman
@alexviman 3 года назад
Классное решение! Буквально на днях пришлось на одном из сайтов переделывать бесконечный слайдер. Но остановился на варианте, когда все слайды быстро перелистываются к первому. И еще был такой момент, что слайдер, работающий в автоматическом режиме, в случае, если пользователь не закрыл страницу, а открыл новую вкладку или просто перешел в уже открытую вкладку на какое-то время и потом возвращается на страницу со слайдером, то слайды начинают быстро мелькать, как бы догоняя упущенное время)) После того, как они "догнали" время, слайдер начинает работать в нормальном режиме. Александр, я думаю, что вы тоже с таким сталкивались. Хотелось бы узнать, есть ли у вас для такого случая решения? Я нашел решение этой проблемы. Но хотелось бы узнать и ваше
@zordq
@zordq 4 года назад
Я знаю, что уже старое видео, но при просмотре задумался, а не проще ли это сделать через три класса для изображения? Активного, которое будет по центру, класса left и класса right, привязать switch классов к счётчику и длине массива, который будет получать в себя все изображения в рамках блока слайдера и проходится по ним счётчиком? Прошу прощения, сам учусь и просто озвучиваю мысли.
@ИванВерушкин-в7ю
@ИванВерушкин-в7ю 3 года назад
Вот вы реализуете зацикленность добавлением-удалением картинок. Но что если элементы - не картинки, некий дивы с анимированным контентом внутри, которые так же нужно крутить-вертеть?
@ВадимЛысый-п8л
@ВадимЛысый-п8л 2 года назад
Работать не с src, а с innerHTML
@vitavits8525
@vitavits8525 5 лет назад
Дуже дякую за відео. Будь -ласка, продовжуйте далі додавати матеріали. Ваші відео надихають!)
@charlesbronson9925
@charlesbronson9925 3 года назад
Крутое видео!! Оно мне помогло в выполнении тз))
@jses8560
@jses8560 4 года назад
Спасибо большое, сейчас очень вовремя!
@artemmolot2474
@artemmolot2474 3 года назад
Всем привет, подскажите как сделать? Чтобы он двигался вправо.
@insiderFX
@insiderFX 4 года назад
Давно искал такой слайдер. Пытаюсь реализовать добавление картинки в слайдер со страницы через форму добавления. Застрял. Подскажите плиз как это сделать, если не затруднит.
@tyooma5338
@tyooma5338 4 года назад
Крутой урок! Мне помогло решить проблему со слайдером
@дилдорахайитова-б1ы
Здравствуйте. А курс у вас бесплатный? Там все можно найти?
@itgid
@itgid Год назад
Нет не бесплатный.
@trelowney
@trelowney 3 года назад
спасибо за видеоурок
@Selieznov
@Selieznov 5 лет назад
Да класс, на моем уровне это еще сложно, но я пока стараюсь познавать. Но вот классная задача, я думал, но пока не способен. Это слайдер, в котором центральный элемент становится больше остальных при прокрутке .
@chefa6155
@chefa6155 4 года назад
А нельзя transform scale применить?
@artik4122
@artik4122 5 лет назад
Тотько вот смотрел skick слайдер а тут у же новое видео спасибо за труд
@mister_robot01
@mister_robot01 5 лет назад
Спасибо за урок, хотелось бы увидеть как сделать слайдер с анимациями, будут ли такие уроки ? имею ввиду не простые эффекты)
@itgid
@itgid 5 лет назад
Например?
@mister_robot01
@mister_robot01 5 лет назад
@@itgid например с 3d трансформациями
@itgid
@itgid 5 лет назад
@@mister_robot01 ну это же тоже css, я думал что вы JS имеете ввиду.
@mister_robot01
@mister_robot01 5 лет назад
@@itgid ну я хочу увидеть анимации на js, а не на css. Видел слайдер, который прокручивается в две стороны, т.е картинка делится на две части и одна часть идет вверх а другая вниз, это тоже css? Было бы круто, еслиб были уроки про такие нестандартные анимации)
@ReAgent003
@ReAgent003 4 года назад
Спасибо, полезное видео. Но желательно бы добавить пролистывание и в другую сторону
@АлексейДавыдов-с2ч
очень познавательно спасибо. Но есть проблема Как сделать такой слайдер адаптивным и отзывчивым
@СусловРостислав
@СусловРостислав 3 года назад
Урааааааааа!))) Это он!)
@Krypton2088
@Krypton2088 3 года назад
у меня выходит ошибка Failed to load resource: net::ERR_FILE_NOT_FOUND
@10KOPs
@10KOPs 5 лет назад
Отличное видео, хотелось бы увидеть адаптивный слайдер, что бы работало на захват курсором (палцьем на сенсоре)
@itgid
@itgid 5 лет назад
Сейчас думаю о подготовке курса тач на js.
@kapotonai
@kapotonai 4 года назад
Не совсем понятно,почему в функции left нужно вводит переменную offset 2.Она же все равно будет равна нулю...
@dimd8824
@dimd8824 5 лет назад
в одном из ваших видео говорится про адаптивность слайдера. Алексей, что вы под этим подразумеваете?
@dimd8824
@dimd8824 5 лет назад
в css привязаться к vmin и постоянно через js определять размеры блока слайдера и подставлять это значение вместо 512 в infinity.js? длинно как-то.. как короче сделать?
@СимоновИван-т8х
@СимоновИван-т8х 5 лет назад
Отличное видео! спасибо за подробный разбор,без overflow даже симпатичнее)
@texno5440
@texno5440 4 года назад
Спасибо очень классный урок хотелось бы сделать так чтоб были 3 картинки а не одна, скажите это реально ? именно в вашем слайдере.
@Алексей-б3ц6в
@Алексей-б3ц6в 4 года назад
эх уроки топ, спасибо
@алексейжучков-я8и
@алексейжучков-я8и 3 года назад
полезное видео, спасибо
@kawaikaino5277
@kawaikaino5277 5 лет назад
Снимите пожалуйста видео о "переборе сложносоставных объектов и массивов"
@itgid
@itgid 5 лет назад
да как бы нужна красивая практическая задача. В принципе поищу.
@artemivahno9131
@artemivahno9131 5 лет назад
спасибо за урок - видео супер! @@itgid как вариант - сделать вертикальную зацикленную прокрутку изображений по 5 в ряд (такое нескончаемое портфолио) (выводится на страницу скажем 15 изображений, всего имеется 45 (т.е. 30 не видны и подгружаются при прокрутке страницы колесом мышки или прокруткой на планшете), получается необходимо все изображения из html разбить на массивы по 5 и потом эти массивы подгружать (я так думаю)
@denisdol935
@denisdol935 4 года назад
как всегда супер
@romanusolcev
@romanusolcev 5 лет назад
Спасибо за урок! Если вы обратили внимание, то нижний текст постоянно прыгает при смещении изображений. Как избежать подобного эффекта?
@itgid
@itgid 5 лет назад
Overflow к внешнему блоку слайдера применить. Текст прыгает потому, что мы не скрываем элементы, которые вылезают за пределы блока, чтобы понимать как работает слайдер.
@romanusolcev
@romanusolcev 5 лет назад
WebDev с нуля. Канал Алекса Лущенко, Спасибо! Не очевидное для меня решение)
@volodymyrfursov5948
@volodymyrfursov5948 5 лет назад
Доброй ночи. Было бы хорошо если вы сделаете уроки по vue js с реальными примерами с разными нетривиальными вещами. Спасибо.
@itgid
@itgid 5 лет назад
по vue.js возможно будет курс в апреле месяце.
@volodymyrfursov5948
@volodymyrfursov5948 5 лет назад
@@itgid Дякую!
@rambelpay4547
@rambelpay4547 5 лет назад
В 4 строке, где у нас цикл, у меня slides.length = undefined. Почему?
@irynabelaya8191
@irynabelaya8191 5 лет назад
Не совсем понятно, почему, если document.onclick = null, эту функция отрабатывет в самый первый раз, сдвигая картинки, я так полагаю, раз указано это свойство, значит оно и первый раз не должно отработать.
@ОтабекАкбаров-е3д
@ОтабекАкбаров-е3д 2 года назад
спасибо за видос
@timbulaaras1986
@timbulaaras1986 4 года назад
Александр, спасибо за вашу работу! Отличный контент. У меня вопрос. После 3-ей картинки в слайдере 4-ая и 5-ая картинка отображаются пустыми, как и весь слайдер дальше после 3-ей картинки. Все картинки находятся в одном месте. Не могу понять, почему так происходит. Если кто-то понимает о чем идет речь, пожалуйста, помогите.)))
@Krypton2088
@Krypton2088 3 года назад
если ты решил эту проблему скажи мне. у меня такая же фигня как и у 100% дураков которые сделали этот слайдер
@МаксимКуц-з5х
@МаксимКуц-з5х 4 года назад
Получилось настроить в обратную сторону по аналогии, но что бы листалось вправо и влево при помощи кнопок - настроить так и не получилось(. можно сбросить вам код что б вы подсказали что не так?
@Krypton2088
@Krypton2088 3 года назад
у меня выходит ошибка Failed to load resource: net::ERR_FILE_NOT_FOUND
@АлександрМорженко-поэткаменног
Откуда вы все методы эти помните ?????
@BySviat
@BySviat 5 лет назад
Реализовал этот слайдер так же, но вместо HTML верстки в php попросил вывести все изображения в папке (на Вашем же курсе по php научился), и теперь вообще плевать сколько изображений надо вывести :) Теперь хочу через тег figure научиться это делать, что бы подписи тоже менялись...
@BySviat
@BySviat 5 лет назад
@@dim_am наверно от уровня зависит, но мне, как нулю, хватило что бы продолжить самостоятельное обучение без особых заморочек (а если и появляются, то автор поддерживает даже после курсов)
@Krypton2088
@Krypton2088 3 года назад
У меня выходит ошибка Failed to load resource: net::ERR_FILE_NOT_FOUND
@Дмитрий-в8н2з
@Дмитрий-в8н2з 2 года назад
Как сделать чтобы вместо картинок выводились блоки div?
@itsollustrifugate6955
@itsollustrifugate6955 5 лет назад
Все круто, а исходников нет(((
@valikprikhodko8559
@valikprikhodko8559 2 года назад
Сделайте, пожалуйста, видео, в котором слайдер будет состоять не только из одних картинок, а и из блоков, в которых и img, и p, и div...У вас все видео про слайдер только из одних картинок, как сделать слайдер из блоков?
@dm92mk
@dm92mk Год назад
можно взять вместо img, div с его содержимым
@Vek0la
@Vek0la 5 лет назад
Хочется увидеть как сделать слайдер с несколькими видимыми изображениями
@Vek0la
@Vek0la 5 лет назад
@@Erudite. да это все подгонка в css, нет адаптивности
@АлександрШатохин-н7г
Поддержу, Александр , просьба сделать бесконечный слайдер к примеру с 3-мя изображениями,
@lydiamarz4084
@lydiamarz4084 3 года назад
Отлично!
@nekitchto14
@nekitchto14 5 лет назад
У меня 7 картинок а в слайдере прокручивается только 4 в чем может быть проблема?
@itgid
@itgid 5 лет назад
длина задана не корректно. Ну или выложите код на codepen - посмотрю.
@artik4122
@artik4122 5 лет назад
как раз хотел на js
@TNT-pv5yl
@TNT-pv5yl 5 лет назад
cпасибо за видео и у меня получилось
@itgid
@itgid 5 лет назад
Это очень круто!
@УлугбекИбрагимов-г1я
Спасибо!
@ДмитрийРоманов-м8ш
Супер!
@ArtLvl-y1o
@ArtLvl-y1o Год назад
Сколько лет верстаю сайты, а все так же не могу понять JS. Уже и Python и C++ знаю на уровне Senior, а вот JS какой-то не логичный
@slavivna
@slavivna Год назад
Все ок. А якщо додати кнопки < > то це на них треба вішати клік і рух слайдів?
@DemetriusPablo
@DemetriusPablo 8 месяцев назад
переводчика нету? чертила
4 года назад
У меня в консоль выводится NodeList(0);(
@itgid
@itgid 4 года назад
значить неправильно класс написали.
4 года назад
@@itgid правильный
@bleckVirus
@bleckVirus 2 года назад
спасибо
@hachiko489
@hachiko489 5 лет назад
Проблему с многократным нажатием решил по другому. Этот вариант *гораздо* хуже. Я просто видео не досмотрел и решил эту задачку до продолжения просмотра. Может кому-то интересно будет. left = () => { let slides2 = document.querySelectorAll('.slide-single'), offset2 = 0; if (slides2.length == 2) { for (let i = 0; i < slides2.length; i++) { slides2[i].style.left = offset2 * 512 - 512 + "px"; offset2++; } setTimeout(() => { slides2[0].remove(); draw(); }, 1000) } else { for(let i = slides2.length; i > 2; i--){ slides2[i-1].remove(); } left(); } } Всего хорошего :)
@schroedingerscat6810
@schroedingerscat6810 5 лет назад
Спасибо огромное. Код перестал сбоить)
@ericenderson3415
@ericenderson3415 5 лет назад
сделай пожалуйста слайдер с точками, может где есть видео создания слайдера с точками? никак найти не могу
@ded-pihto
@ded-pihto 5 лет назад
если для сайта, а не для обучения, есть Owl Carousel
@ericenderson3415
@ericenderson3415 5 лет назад
@@ded-pihto нелюблю плагины, мне нужно именно на чистом js, негде видео не могу найти
@ded-pihto
@ded-pihto 5 лет назад
@@ericenderson3415 по сути точки это те же картинки и они перемещаются с помощью похожей функции
@ericenderson3415
@ericenderson3415 5 лет назад
@@ded-pihto да мне не только точки, хочу посмотреть как делается бесконечный слайдер
@lsy4227
@lsy4227 5 лет назад
Спасибо за урок, Алекс! Почему-то не работает в Internet Explorer...
@itgid
@itgid 5 лет назад
В какой версии?
@lsy4227
@lsy4227 5 лет назад
@@itgid Internet Explorer 11 11.523.17134.0 Может быть, я где-то ошибся в коде. В Хроме, Мозиле и в Эдже все работает корректно.
@kapotonai
@kapotonai 5 лет назад
Не понял,зачем нужен : slides[i].remove()?;
@TNT-pv5yl
@TNT-pv5yl 5 лет назад
чтобы удалить элементы
@kapotonai
@kapotonai 5 лет назад
@@TNT-pv5yl чтобы удалить,я понял.Мне не понятна логика.
@kapotonai
@kapotonai 4 года назад
@@TNT-pv5yl пересмотрел через год и теперь понимаю)И 3-х лет не прошло.
@MrSlavjon
@MrSlavjon 5 лет назад
А что за редактор?
@HitHodROOM
@HitHodROOM 5 лет назад
visual studio code
@MrSlavjon
@MrSlavjon 5 лет назад
@@HitHodROOM Спасибо
@itgid
@itgid 5 лет назад
VisualStudio Code, VSC
@ЧынгызДжумадылов-о5я
@ЧынгызДжумадылов-о5я 10 месяцев назад
💥
@SunMoonBrothers
@SunMoonBrothers 5 лет назад
норм все работает
@СергейСергей-к8я3г
Алекса дайте ваш вк или скайп пожалуйста мне нужна помощь по корзине нужен диалог
@itgid
@itgid 5 лет назад
Luschenko@gmail.com
@digitalturkistan1857
@digitalturkistan1857 5 лет назад
спасиб
@nickudo3721
@nickudo3721 4 года назад
КОММЕНТИРУЮ
@НиколайМясоедов-й1б
Сложно.
@TheTridoknite
@TheTridoknite 3 года назад
sypeer
@ГенаФес-ъ9з
@ГенаФес-ъ9з 4 года назад
super
@ArtLvl-y1o
@ArtLvl-y1o Год назад
Вообще не понятно😄
@freeman2607
@freeman2607 4 года назад
капец, неужели это НАСТОЛЬКО ценный код, что его нельзя было расшарить? Боитесь за свой гитхаб - так сделайте пример в песочнице и выложите, в чем проблема? Без листинга тяжело разобраться
Далее
Тестирую гаджет для роллов! 🙈
00:42
Шоколад приходит на Землю.
00:23
Просмотров 166 тыс.
Учим Java Script 12. Создаем слайдер
19:50
Как сделать слайдер на JS?
27:37
Просмотров 90 тыс.
Тестирую гаджет для роллов! 🙈
00:42