урок как всегда интересный, качественный и понятный! Спасибо Вам огромное за время и труд которое Вы тратите на уроки для нас!!!!))) Вы лучший преподаватель!!!
спасибо, сейчас так же найду у вас на канале чтобы можно было и вправо листать, и чтобы он сам листался по таймеру, ну и стрелочки с кружечками добавить)))
Вы очень доступно и понятно объясняете, за это огромное спасибо. Учусь на itgid, по вашим видио. Решил приобрести необходимые мне курсы. Также хочу добавить, Vue.js и Angular - хотел бы видеть на itgid. Что я бы изменил в слайдере: слайдер сам должен переключать изображения (по тайму).
Классное видео! Спасибо!:) Делал бесконечный слайдер через индексы слайдов, а тут через удаление и вставку, круто!:) Будет здорово, если появится урок по слайдеру через индексы слайдов:)
Я *тот который заметил опечатку но не исправил ее потому что сомневался в правильности выбора: Я ВСЕГО ЛИШЬ СЛЕПО ВЕРИЛ ТЕБЕ!!1!! А ТЫ ПОСМЕЛ ТАК НАГЛО ОБМАНУТЬ МЕНЯ!!!!!
Я думаю в современных реалиях использовать query селекторы и присваивать функции на "on-события" это, скажем так, непрофессионально. Намного лучше использовать альтернативы в виде getElement.. и addEventListener, потому что при использовании query-селекторов по сути парсится весь документ, а при использовании getElement нужный элемент берется из "дерева узлов", который современные браузеры делают на лету. Если в присвоенной на on-событие функции пойдет что-то не то, например она будет долго выполнятся, то на время выполнения заморозится весь документ, а с использование AddEventListener такого не будет. Вы конечно можете сказать, что это сделано "для поддержки старых браузеров", но зачем тогда использовать let, вместо var? Забавно смотреть на такие неграмотные примеры от людей, которые продают курсы.
спасибо за урок - видео супер! @@itgid как вариант - сделать вертикальную зацикленную прокрутку изображений по 5 в ряд (такое нескончаемое портфолио) (выводится на страницу скажем 15 изображений, всего имеется 45 (т.е. 30 не видны и подгружаются при прокрутке страницы колесом мышки или прокруткой на планшете), получается необходимо все изображения из html разбить на массивы по 5 и потом эти массивы подгружать (я так думаю)
Да класс, на моем уровне это еще сложно, но я пока стараюсь познавать. Но вот классная задача, я думал, но пока не способен. Это слайдер, в котором центральный элемент становится больше остальных при прокрутке .
Давно искал такой слайдер. Пытаюсь реализовать добавление картинки в слайдер со страницы через форму добавления. Застрял. Подскажите плиз как это сделать, если не затруднит.
Александр, спасибо! Очень полезный контент. Я потратил много времени, чтобы заставить слайдер листаться вправо. Но, к сожалению, не получается. Может подскажете как это сделать? Заранее спасибо!
Я знаю, что уже старое видео, но при просмотре задумался, а не проще ли это сделать через три класса для изображения? Активного, которое будет по центру, класса left и класса right, привязать switch классов к счётчику и длине массива, который будет получать в себя все изображения в рамках блока слайдера и проходится по ним счётчиком? Прошу прощения, сам учусь и просто озвучиваю мысли.
Вот вы реализуете зацикленность добавлением-удалением картинок. Но что если элементы - не картинки, некий дивы с анимированным контентом внутри, которые так же нужно крутить-вертеть?
Overflow к внешнему блоку слайдера применить. Текст прыгает потому, что мы не скрываем элементы, которые вылезают за пределы блока, чтобы понимать как работает слайдер.
@@itgid ну я хочу увидеть анимации на js, а не на css. Видел слайдер, который прокручивается в две стороны, т.е картинка делится на две части и одна часть идет вверх а другая вниз, это тоже css? Было бы круто, еслиб были уроки про такие нестандартные анимации)
Реализовал этот слайдер так же, но вместо HTML верстки в php попросил вывести все изображения в папке (на Вашем же курсе по php научился), и теперь вообще плевать сколько изображений надо вывести :) Теперь хочу через тег figure научиться это делать, что бы подписи тоже менялись...
@@dim_am наверно от уровня зависит, но мне, как нулю, хватило что бы продолжить самостоятельное обучение без особых заморочек (а если и появляются, то автор поддерживает даже после курсов)
Классное решение! Буквально на днях пришлось на одном из сайтов переделывать бесконечный слайдер. Но остановился на варианте, когда все слайды быстро перелистываются к первому. И еще был такой момент, что слайдер, работающий в автоматическом режиме, в случае, если пользователь не закрыл страницу, а открыл новую вкладку или просто перешел в уже открытую вкладку на какое-то время и потом возвращается на страницу со слайдером, то слайды начинают быстро мелькать, как бы догоняя упущенное время)) После того, как они "догнали" время, слайдер начинает работать в нормальном режиме. Александр, я думаю, что вы тоже с таким сталкивались. Хотелось бы узнать, есть ли у вас для такого случая решения? Я нашел решение этой проблемы. Но хотелось бы узнать и ваше
в css привязаться к vmin и постоянно через js определять размеры блока слайдера и подставлять это значение вместо 512 в infinity.js? длинно как-то.. как короче сделать?
Получилось настроить в обратную сторону по аналогии, но что бы листалось вправо и влево при помощи кнопок - настроить так и не получилось(. можно сбросить вам код что б вы подсказали что не так?
Не совсем понятно, почему, если document.onclick = null, эту функция отрабатывет в самый первый раз, сдвигая картинки, я так полагаю, раз указано это свойство, значит оно и первый раз не должно отработать.
Александр, спасибо за вашу работу! Отличный контент. У меня вопрос. После 3-ей картинки в слайдере 4-ая и 5-ая картинка отображаются пустыми, как и весь слайдер дальше после 3-ей картинки. Все картинки находятся в одном месте. Не могу понять, почему так происходит. Если кто-то понимает о чем идет речь, пожалуйста, помогите.)))
Сделайте, пожалуйста, видео, в котором слайдер будет состоять не только из одних картинок, а и из блоков, в которых и img, и p, и div...У вас все видео про слайдер только из одних картинок, как сделать слайдер из блоков?
Проблему с многократным нажатием решил по другому. Этот вариант *гораздо* хуже. Я просто видео не досмотрел и решил эту задачку до продолжения просмотра. Может кому-то интересно будет. 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(); } } Всего хорошего :)
капец, неужели это НАСТОЛЬКО ценный код, что его нельзя было расшарить? Боитесь за свой гитхаб - так сделайте пример в песочнице и выложите, в чем проблема? Без листинга тяжело разобраться
Супер, самый нормальный наставник. Всегда объясняет каждый шаг, а не "создалили это то то тото это вот это сейчас это теперь это"!))
Спасибо за проделанную Вами работу, спасибо за уделенное время! У вас талант объяснять!
Именно то, что мне нужно было. По началу этого видео я понял принцип работы подобных слайдеров, что для меня было не понятно. Спасибо за подсказку!)
урок как всегда интересный, качественный и понятный! Спасибо Вам огромное за время и труд которое Вы тратите на уроки для нас!!!!))) Вы лучший преподаватель!!!
Отличный урок. Именно то что мне нужно было. Спасибо 👍🏻
спасибо, сейчас так же найду у вас на канале чтобы можно было и вправо листать, и чтобы он сам листался по таймеру, ну и стрелочки с кружечками добавить)))
хорошее видео!
как вариант вместо setTimeout можно использовать событие transitionend
Так даже лучше будет! Спасибо за наводку.
Да, только потом слушателю нужно будет установить третьим параметром флаг once:true, чтобы при каждом клике не генерировался очередной слушатель
Пожалуй идеальный слайдер который я видел, годно !
Полезный урок про слайдер на js. Рекомендую!
Спасибо за вашу работу, все чётко и понятно объяснили!!!
Рад!
Александр, спасибо Вам за урок. Хотелось бы посмотреть как это осуществить на две кнопки - вперед,назад.
+
+
Спасибо за урок, помогает решить мою задачу.
Вы очень доступно и понятно объясняете, за это огромное спасибо. Учусь на itgid, по вашим видио. Решил приобрести необходимые мне курсы. Также хочу добавить, Vue.js и Angular - хотел бы видеть на itgid.
Что я бы изменил в слайдере: слайдер сам должен переключать изображения (по тайму).
Супер! Именно профи - наставник.
Дуже дякую за відео. Будь -ласка, продовжуйте далі додавати матеріали. Ваші відео надихають!)
велике спасибі за цікавий та практичний урок)
Отлично объяснил, легко и понятно для новичка!
очень интересно увидеть урок по свайпу на слайдере, везде где смотрел, только через библиотеки, на чистом JS не находил
Классное видео! Спасибо!:) Делал бесконечный слайдер через индексы слайдов, а тут через удаление и вставку, круто!:) Будет здорово, если появится урок по слайдеру через индексы слайдов:)
Коммент в поддержку.
Отличный материал!
Спасибо! Адаптивность слайдера актуальная задача, было бы здорово когда-нибудь увидеть вашу реализацию.
#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;
}
Я *тот который заметил опечатку но не исправил ее потому что сомневался в правильности выбора:
Я ВСЕГО ЛИШЬ СЛЕПО ВЕРИЛ ТЕБЕ!!1!! А ТЫ ПОСМЕЛ ТАК НАГЛО ОБМАНУТЬ МЕНЯ!!!!!
Увы мне
Что за опечатка?? И почему когда меняешь фото картинки не отображается???
Спасибо за то, что я вас нашел. Это топовый контент.
Всем привет, подскажите как сделать?
Чтобы он двигался вправо.
Отличное видео! спасибо за подробный разбор,без overflow даже симпатичнее)
Хорошее решение, единственное хотелось бы оптимизировать это, на действия по клику кнопки и в обратном направлении.
Отличный урок!
Это то, что я искал! Спасибо
Супер! Спасибо за урок!
Отличное видео, хотелось бы увидеть адаптивный слайдер, что бы работало на захват курсором (палцьем на сенсоре)
Сейчас думаю о подготовке курса тач на js.
Крутое видео!! Оно мне помогло в выполнении тз))
Спасибо большое, сейчас очень вовремя!
Спасибо, полезное видео. Но желательно бы добавить пролистывание и в другую сторону
Крутой урок! Мне помогло решить проблему со слайдером
Я думаю в современных реалиях использовать query селекторы и присваивать функции на "on-события" это, скажем так, непрофессионально.
Намного лучше использовать альтернативы в виде getElement.. и addEventListener, потому что при использовании query-селекторов по сути парсится весь документ, а при использовании getElement нужный элемент берется из "дерева узлов", который современные браузеры делают на лету. Если в присвоенной на on-событие функции пойдет что-то не то, например она будет долго выполнятся, то на время выполнения заморозится весь документ, а с использование AddEventListener такого не будет.
Вы конечно можете сказать, что это сделано "для поддержки старых браузеров", но зачем тогда использовать let, вместо var?
Забавно смотреть на такие неграмотные примеры от людей, которые продают курсы.
У меня выходит ошибка Failed to load resource: net::ERR_FILE_NOT_FOUND
Урааааааааа!))) Это он!)
у меня выходит ошибка Failed to load resource: net::ERR_FILE_NOT_FOUND
Снимите пожалуйста видео о "переборе сложносоставных объектов и массивов"
да как бы нужна красивая практическая задача. В принципе поищу.
спасибо за урок - видео супер!
@@itgid как вариант - сделать вертикальную зацикленную прокрутку изображений по 5 в ряд (такое нескончаемое портфолио) (выводится на страницу скажем 15 изображений, всего имеется 45 (т.е. 30 не видны и подгружаются при прокрутке страницы колесом мышки или прокруткой на планшете), получается необходимо все изображения из html разбить на массивы по 5 и потом эти массивы подгружать (я так думаю)
Тотько вот смотрел skick слайдер а тут у же новое видео спасибо за труд
Да класс, на моем уровне это еще сложно, но я пока стараюсь познавать. Но вот классная задача, я думал, но пока не способен.
Это слайдер, в котором центральный элемент становится больше остальных при прокрутке .
А нельзя transform scale применить?
Ребята, а как сделать такой же слайдер, но чтоб в онке отображались 3 изображения а не 1? Автору спасибо за его уроки.
Доброй ночи. Было бы хорошо если вы сделаете уроки по vue js с реальными примерами с разными нетривиальными вещами. Спасибо.
по vue.js возможно будет курс в апреле месяце.
@@itgid Дякую!
Как сделать чтобы вместо картинок выводились блоки div?
спасибо за видеоурок
очень познавательно спасибо. Но есть проблема Как сделать такой слайдер адаптивным и отзывчивым
как всегда супер
эх уроки топ, спасибо
Давно искал такой слайдер. Пытаюсь реализовать добавление картинки в слайдер со страницы через форму добавления. Застрял. Подскажите плиз как это сделать, если не затруднит.
Александр, спасибо! Очень полезный контент. Я потратил много времени, чтобы заставить слайдер листаться вправо. Но, к сожалению, не получается. Может подскажете как это сделать? Заранее спасибо!
Супер!
полезное видео, спасибо
спасибо за видос
В 4 строке, где у нас цикл, у меня slides.length = undefined. Почему?
Откуда вы все методы эти помните ?????
Я знаю, что уже старое видео, но при просмотре задумался, а не проще ли это сделать через три класса для изображения? Активного, которое будет по центру, класса left и класса right, привязать switch классов к счётчику и длине массива, который будет получать в себя все изображения в рамках блока слайдера и проходится по ним счётчиком? Прошу прощения, сам учусь и просто озвучиваю мысли.
Вот вы реализуете зацикленность добавлением-удалением картинок. Но что если элементы - не картинки, некий дивы с анимированным контентом внутри, которые так же нужно крутить-вертеть?
Работать не с src, а с innerHTML
Спасибо за урок! Если вы обратили внимание, то нижний текст постоянно прыгает при смещении изображений. Как избежать подобного эффекта?
Overflow к внешнему блоку слайдера применить. Текст прыгает потому, что мы не скрываем элементы, которые вылезают за пределы блока, чтобы понимать как работает слайдер.
WebDev с нуля. Канал Алекса Лущенко, Спасибо! Не очевидное для меня решение)
Спасибо за урок, хотелось бы увидеть как сделать слайдер с анимациями, будут ли такие уроки ? имею ввиду не простые эффекты)
Например?
@@itgid например с 3d трансформациями
@@mister_robot01 ну это же тоже css, я думал что вы JS имеете ввиду.
@@itgid ну я хочу увидеть анимации на js, а не на css. Видел слайдер, который прокручивается в две стороны, т.е картинка делится на две части и одна часть идет вверх а другая вниз, это тоже css? Было бы круто, еслиб были уроки про такие нестандартные анимации)
Спасибо очень классный урок хотелось бы сделать так чтоб были 3 картинки а не одна, скажите это реально ? именно в вашем слайдере.
У меня в консоль выводится NodeList(0);(
значить неправильно класс написали.
@@itgid правильный
Реализовал этот слайдер так же, но вместо HTML верстки в php попросил вывести все изображения в папке (на Вашем же курсе по php научился), и теперь вообще плевать сколько изображений надо вывести :)
Теперь хочу через тег figure научиться это делать, что бы подписи тоже менялись...
@@dim_am наверно от уровня зависит, но мне, как нулю, хватило что бы продолжить самостоятельное обучение без особых заморочек (а если и появляются, то автор поддерживает даже после курсов)
Классное решение! Буквально на днях пришлось на одном из сайтов переделывать бесконечный слайдер. Но остановился на варианте, когда все слайды быстро перелистываются к первому. И еще был такой момент, что слайдер, работающий в автоматическом режиме, в случае, если пользователь не закрыл страницу, а открыл новую вкладку или просто перешел в уже открытую вкладку на какое-то время и потом возвращается на страницу со слайдером, то слайды начинают быстро мелькать, как бы догоняя упущенное время)) После того, как они "догнали" время, слайдер начинает работать в нормальном режиме. Александр, я думаю, что вы тоже с таким сталкивались. Хотелось бы узнать, есть ли у вас для такого случая решения? Я нашел решение этой проблемы. Но хотелось бы узнать и ваше
как раз хотел на js
Не совсем понятно,почему в функции left нужно вводит переменную offset 2.Она же все равно будет равна нулю...
Все круто, а исходников нет(((
У меня 7 картинок а в слайдере прокручивается только 4 в чем может быть проблема?
длина задана не корректно. Ну или выложите код на codepen - посмотрю.
cпасибо за видео и у меня получилось
Это очень круто!
Отлично!
Здравствуйте. А курс у вас бесплатный? Там все можно найти?
Нет не бесплатный.
Хочется увидеть как сделать слайдер с несколькими видимыми изображениями
@@Erudite. да это все подгонка в css, нет адаптивности
Поддержу, Александр , просьба сделать бесконечный слайдер к примеру с 3-мя изображениями,
в одном из ваших видео говорится про адаптивность слайдера. Алексей, что вы под этим подразумеваете?
в css привязаться к vmin и постоянно через js определять размеры блока слайдера и подставлять это значение вместо 512 в infinity.js? длинно как-то.. как короче сделать?
Получилось настроить в обратную сторону по аналогии, но что бы листалось вправо и влево при помощи кнопок - настроить так и не получилось(. можно сбросить вам код что б вы подсказали что не так?
у меня выходит ошибка Failed to load resource: net::ERR_FILE_NOT_FOUND
Не совсем понятно, почему, если document.onclick = null, эту функция отрабатывет в самый первый раз, сдвигая картинки, я так полагаю, раз указано это свойство, значит оно и первый раз не должно отработать.
Спасибо!
сделай пожалуйста слайдер с точками, может где есть видео создания слайдера с точками? никак найти не могу
если для сайта, а не для обучения, есть Owl Carousel
@@ded-pihto нелюблю плагины, мне нужно именно на чистом js, негде видео не могу найти
@@ericenderson3415 по сути точки это те же картинки и они перемещаются с помощью похожей функции
@@ded-pihto да мне не только точки, хочу посмотреть как делается бесконечный слайдер
Александр, спасибо за вашу работу! Отличный контент. У меня вопрос. После 3-ей картинки в слайдере 4-ая и 5-ая картинка отображаются пустыми, как и весь слайдер дальше после 3-ей картинки. Все картинки находятся в одном месте. Не могу понять, почему так происходит. Если кто-то понимает о чем идет речь, пожалуйста, помогите.)))
если ты решил эту проблему скажи мне. у меня такая же фигня как и у 100% дураков которые сделали этот слайдер
Спасибо за урок, Алекс! Почему-то не работает в Internet Explorer...
В какой версии?
@@itgid
Internet Explorer 11 11.523.17134.0
Может быть, я где-то ошибся в коде. В Хроме, Мозиле и в Эдже все работает корректно.
Сделайте, пожалуйста, видео, в котором слайдер будет состоять не только из одних картинок, а и из блоков, в которых и img, и p, и div...У вас все видео про слайдер только из одних картинок, как сделать слайдер из блоков?
можно взять вместо img, div с его содержимым
спасибо
💥
Не понял,зачем нужен : slides[i].remove()?;
чтобы удалить элементы
@@TNT-pv5yl чтобы удалить,я понял.Мне не понятна логика.
@@TNT-pv5yl пересмотрел через год и теперь понимаю)И 3-х лет не прошло.
норм все работает
Все ок. А якщо додати кнопки < > то це на них треба вішати клік і рух слайдів?
переводчика нету? чертила
спасиб
А что за редактор?
visual studio code
@@HitHodROOM Спасибо
VisualStudio Code, VSC
Проблему с многократным нажатием решил по другому. Этот вариант *гораздо* хуже. Я просто видео не досмотрел и решил эту задачку до продолжения просмотра. Может кому-то интересно будет.
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();
}
}
Всего хорошего :)
Спасибо огромное. Код перестал сбоить)
Сколько лет верстаю сайты, а все так же не могу понять JS. Уже и Python и C++ знаю на уровне Senior, а вот JS какой-то не логичный
super
КОММЕНТИРУЮ
Алекса дайте ваш вк или скайп пожалуйста мне нужна помощь по корзине нужен диалог
Luschenko@gmail.com
sypeer
Сложно.
Вообще не понятно😄
капец, неужели это НАСТОЛЬКО ценный код, что его нельзя было расшарить? Боитесь за свой гитхаб - так сделайте пример в песочнице и выложите, в чем проблема? Без листинга тяжело разобраться