Вот почему вы обьясняете на столько доступно на сколько это можно. Смотрел видео по слайдерам просто горы кода и класс присвоят и айди сами исправляют по ходу видео думал не смогу освоить слайдер. После вашего видео все понятно стало, не с первого раза но сделал.Спасибо !
Очень и очень понравилось, случайно зашел, очень крутые уроки, буду всем советовать +подписался, очень крутые уроки, наглядно показывают использование JS, есть хорошие ресурсы типо лерндж НО! Там не показывают наглядно вот так, есть задачи но ты выполнил и не доганяешь где их использовать типо выучил и все, а что с ними делать непонятно, то вы обьясняете очень толково, очень жду еще уроков по ДЖС!
Автору респект, 2 дня искал вертикальный слайдер, в итоге решил сделать сам, посмотрел видео + немного изменил параметры = вертикальный слайдер, осталось немного визуал доработать))Спасибо за видео, сразу видно качество видео 2к лайков и 23диза, удивляюсь с того что кто-то еще дизы ставит, скорее всего это конкуренты))
Класс! Всегда хотел разобраться в слайдерах но не хватало желания) с Вашими уроками так легко и понятно) Раньше встраивал готовые но это совсем не то) Когда понятен принцип работы все намного проще и четче)
Если кому надо, чтобы была кнопка вправо, вот код JS: document.getElementById('slider-right').onclick = sliderRight; var right = 0; function sliderRight() { var polosa = document.getElementById('polosa'); left += 128; if (left > 0) { left = -512; } polosa.style.left = left +'px'; } P.S. Не забудьте добавить её в HTML с соответствующим id Спасибо автору за урок!
Предыдущие уроки были для мене черезчур легкими и слишком простыми, так как я хорошо знаком с другими языками и мне нужно было узнать чем js отличается от них попутно вьехав в суть дела. Но вот этот урок как раз то, что нужно. Получил прям удовольствие!!! Спасибо!!!
Тут возможны разные варианты - первый, который используют наиболее часто - это отмотка "назад". Второй, более сложный, - бесконечный слайдер, который работает чуть по другой логике.
очень крутые уроки для старта! если кому нужно прокрутка слайдера вправо , единственно у меня ширина картинки 256px: function sliderRight() { var lenta = document.getElementById('lenta'); left += 256; if(left > 0){ left = -1024; } lenta.style.left = left + 'px'; }
Автору большое спасибо. Я начинающий JS с CSS немного знаком. Очень наглядно показано как взаимодействует CSS и JavaScript. Но если слайдер сделать на flex то css код будет значительно проще :-)
Спасибо за урок!) Очень подробно и интересно) Есть одно дополнение: вместо того чтобы писать код для #polosa::after, можно написать так #polosa{overflow:auto;}. Эффект тот же.
Не знаю уместно ещё или нет, но из-за css свойства transition достигается плавность. И после того как применили left:0, он с заданным transition плывет к этому значению.
Автору огромное спасибо! Которое видео смотрю и не нарадуюсь! Все очень грамотно, интересно, доходчиво и понятно. По моему убеждению - лучший канал по JS. Давно искал идею простого слайдера и находил нечто подобное, но с кучей кода. На радостях немного доработал внешний вид и логику движения слайдов - слева на право, если кому будет интересно: codepen.io/russian-stan/full/LmzoOp/
А почему консоль ругается на sliderLeft и код не работает если я пишу так вначале? let sliderLeft; sliderLeft = document.getElementById('slider-left').onclick;
21к подписчиков, вы серьезно? Я бы сам денег на рекламу этого канала накинул, честное слово (я просто нищий, мне такое легко писать). Серьзно, я учусь в Германии на веб программиста, уровень Ваших уроков на 3 головы превосходит качество подачи материала моих доцентов!
А у меня почему-то розовый фон (на 7:57 видео) охватил только последний ряд, там где 1 картинка, хотя код один в один писал. Как так вышло не подскажете?
Я вижу что у вас точка с запятой сама ставится в конце команды css). Впрочем, в процессе разбора ваших уроков я уже сам заметил некоторые фичи эммета. Спасибо за уроки!
добрый день. Хотел бы задать вопрос, как создать такую же картинку поле конца прокруки. var cases = document.getElementById('case'); document.getElementById('start-button').onclick = start; var casesdraw = document.getElementById('cases1'); var left=0; function start(){ left = left - 780; if (left < -1580) {
создание картинки в классе case } cases.style.left = left + 'px'; } yнашел код, но не могу разобраться как вставить фото не в body, а именно в класс case document.body вот сюда .appendChild(img); function img() {
Здравствуйте! Алекс, а скажите как нам такой слайдер сделать адаптивным ведь у нас не картинки будут сжиматься а сама полоса и естественно картинки внутри будут сжиматься в месте с полосой ну и само собой полезут одна на вторую как быть в таком случаи если можете дайте ответ! спасибо
Благодарю за урок, очень доступно! Один момент не понял на 17:50. В CSS для #polosa задаём свойство со значением left: 0; чтобы transition работал плавно для всего блока. В чём логика? Может кто разъяснит...
Добрый день! Укажите на ошибку, почему клик в обратную сторону не срабатывает? 'use strict'; let btn = document.querySelector('#slider-left'); let btn2 = document.querySelector('#slider-right'); let left = 0; let right = 0; function sliderLeft(){ btn.addEventListener('click', function(){ let line = document.querySelector('#line'); left = left - 128; if(left < -384){ left = 0; } line.style.left = left +'px'; }) } function sliderRight(){ btn2.addEventListener('click', function(){ let line = document.querySelector('#line'); right = right + 128; if(right > 384 ){ right = 0; } line.style.right = right + 'px'; }) } sliderLeft(); sliderRight();
Спасибо. А какие еще варианты присвоения существуют на onclick? я к чему, пока что в таком же виде присваиваются названия переменных, вот и удивительно стало, что по это выглядит именно как присвоение имени переменной, хотя логика подсказывает, что событию можно присвоить только действие.
Почему у меня ругается document.getElementById('slider-left').onclick = sliderLeft; Cannot set property 'onclick' of null на sliderLeft Подскажите плиз
в консоли у меня просто ошибок не выдает, тогда пути неправильные? просто я еще пробовал через ссылку и тоже не работает, одна из трех загружается только
Александр, на дворе 2022 год, а ваши уроки по-прежнему актуальны и интересны. Спасибо вам!
Автор, просто прекрасен. Более понятно еще никто не объяснял.
Автору огромная благодарность, очень позновательно, применительно, полезно. Просто нет слов, одни эмоции и благодарность
Спасибо!
Автор у Вас очень приятная подача материала =)
Спасибо. Приятно.
Наглядно, понятно и без лишних понтов, как у многих. Спасибо!
Вот почему вы обьясняете на столько доступно на сколько это можно. Смотрел видео по слайдерам просто горы кода и класс присвоят и айди сами исправляют по ходу видео думал не смогу освоить слайдер. После вашего видео все понятно стало, не с первого раза но сделал.Спасибо !
Потому, что объясняю так, как хотел чтобы мне объясняли.
Очень и очень понравилось, случайно зашел, очень крутые уроки, буду всем советовать +подписался, очень крутые уроки, наглядно показывают использование JS, есть хорошие ресурсы типо лерндж НО! Там не показывают наглядно вот так, есть задачи но ты выполнил и не доганяешь где их использовать типо выучил и все, а что с ними делать непонятно, то вы обьясняете очень толково, очень жду еще уроков по ДЖС!
стараюсь.
Помогите у меня в
#polosa img{
float: left;
}
Не смещаются картинки
Всё.Нашёл ошибку в написание слова именно у меня в файле
Автору респект, 2 дня искал вертикальный слайдер, в итоге решил сделать сам, посмотрел видео + немного изменил параметры = вертикальный слайдер, осталось немного визуал доработать))Спасибо за видео, сразу видно качество видео 2к лайков и 23диза, удивляюсь с того что кто-то еще дизы ставит, скорее всего это конкуренты))
Класс! Всегда хотел разобраться в слайдерах но не хватало желания) с Вашими уроками так легко и понятно) Раньше встраивал готовые но это совсем не то) Когда понятен принцип работы все намного проще и четче)
Более того, вы получаете полный контроль над слайдером и можете делать все, что хотите. Вертикальный слайдер - легко!
Гениально и Просто. Спасибо что есть такой преподаватель как вы!
Спасибо большое. Очень понравился урок. Главное простой и понятный слайдер.
большое спасибо, благодаря понятному объяснению самостоятельно смог сделать кнопочку промотки и вправо:)
начну изучать ваш канал, подписка однозначно.
Посмотерел. С пол урока уже сам понял и доделал, потом сверился. Спасибо за уроки!)
Если кому надо, чтобы была кнопка вправо, вот код JS:
document.getElementById('slider-right').onclick = sliderRight;
var right = 0;
function sliderRight() {
var polosa = document.getElementById('polosa');
left += 128;
if (left > 0) {
left = -512;
}
polosa.style.left = left +'px';
}
P.S. Не забудьте добавить её в HTML с соответствующим id
Спасибо автору за урок!
Volodymyr Volovych,Спасибо и Вам за right!)
смысл создавать переменную right если ты не использовал ее?
Ну ты красавчик. Назвал переменную var right=0 А потом пишешь уже left+=128 . Мда уж
як добре, коли не просто копіпастиш, а ще й бачиш які люди помилки допускають
Очень подробно и доходчиво. Большое спасибо!!!
Круто!
Спасибо, это самый доступный пример реализации слайдера, который я находил)
Урок огонь!Мне очень нравится заниматься по вашим видео-урокам!
Предыдущие уроки были для мене черезчур легкими и слишком простыми, так как я хорошо знаком с другими языками и мне нужно было узнать чем js отличается от них попутно вьехав в суть дела.
Но вот этот урок как раз то, что нужно. Получил прям удовольствие!!! Спасибо!!!
Спасибо! Очень доступно! Хотелось бы еще урок о том, как "закольцевать" слайдер на чистом js.
Тут возможны разные варианты - первый, который используют наиболее часто - это отмотка "назад". Второй, более сложный, - бесконечный слайдер, который работает чуть по другой логике.
Александр,Спасибо Вам большое!Вы лучший!
очень крутые уроки для старта!
если кому нужно прокрутка слайдера вправо , единственно у меня ширина картинки 256px:
function sliderRight() {
var lenta = document.getElementById('lenta');
left += 256;
if(left > 0){
left = -1024;
}
lenta.style.left = left + 'px';
}
слайды не так листаются как хотелось бы(
У вас перепутаны местами left и right
лучше бы дал людям самим написать...
кому то помогло...
Спасибо за урок! Полезное видео с отличной подачей материала.
Автору большое спасибо. Я начинающий JS с CSS немного знаком. Очень наглядно показано как взаимодействует CSS и JavaScript. Но если слайдер сделать на flex то css код будет значительно проще :-)
возможно. Попробуйте - скиньте код, с удовольствием изучу.
До чего же все понятно рассказали.
С удовольствием подписался)
Спасибо!
Огромное спасибо за видео, я его немного доработал, теперь можно и вправо и влево пролистывать))
Не могли б помочь с кнопкой вправо ?)
Спасибо за урок!) Очень подробно и интересно)
Есть одно дополнение: вместо того чтобы писать код для #polosa::after, можно написать так #polosa{overflow:auto;}. Эффект тот же.
Не устану благодарить вас за ваши уроки!!!
Подскажите пожалуйста, а есть ли у вас видео о том, как зациклить слайдер, чтобы он шел по кругу?
СУПЕР МЕГА Интересно!! программирование с простыми словами ..спасибо вам ещё раз!
Оказывается слайдер - это совсем не сложно! И никакие плагины нафик не нужны) Спасибо!
После бездумного использования slick.js очень интересно увидеть, как это всё работает ) Спасибо за урок. Да и за остальные тоже спасибо )
Объясните пожалуйста, почему на 18:20 для плавного возвращения в изначальное положение нам помогло left:0; ?
Большое спасибо !
Не знаю уместно ещё или нет, но из-за css свойства transition достигается плавность. И после того как применили left:0, он с заданным transition плывет к этому значению.
Замечательная подача, вы большой молодец!
Супер просто! нет то слов ...спасибо вам за все уроки...
Пожалуйста. Дальше будет.
Спасибо большое за понятное объяснение!
Спасибо!
Спасибо огромное! Благодаря Вам наконец-то сделала слайдер!
Спасибо, все доходчиво, надеюсь покажете как крутить слайдер по-кругу.
Самый хороший и качественный видео урок который я видел.
Спасибо большое за Ваш труд
Спасибо. Пишите если есть интересные идеи, буду их делать на JS
Автору огромное спасибо! Которое видео смотрю и не нарадуюсь! Все очень грамотно, интересно, доходчиво и понятно. По моему убеждению - лучший канал по JS. Давно искал идею простого слайдера и находил нечто подобное, но с кучей кода. На радостях немного доработал внешний вид и логику движения слайдов - слева на право, если кому будет интересно: codepen.io/russian-stan/full/LmzoOp/
круто!
Очень толково, спасибо!
Спасибо, лучше всех объясняешь, в общем лучший )))👍
Спасибо) Я искал это давно, но к сожалению не нашел ответа долго) Обьяняете прекрасно)
Автору, спасибо огромное!!!!!
Спасибо что оставляете такие комментарии!
скажите пожалуйста, почему на 10:48 функция sliderLeft в 1-ой строке написана без скобок? ( )
Расстояние между инлайн блоками не всегда 4px, зависит от семейства шрафта, размера и ряда других факторов.
Просто лучший! Здоровья тебе и денег!
Как сделать на этом примере но штобы они плавно переходили с последнего рисунка на первый также плавно как все преведущие рисунки?Подскажыте пожалста.
Большое спасибо за уроки.
очень доступно объяснено, спасибо!
Спасибо!
На дворе 2024 год ролик полезен, спасибо.
Спасибо, очень интересный и познавательный урок!
Какой ноутбук выбрать?
А почему консоль ругается на sliderLeft и код не работает если я пишу так вначале?
let sliderLeft;
sliderLeft = document.getElementById('slider-left').onclick;
Ты всё объясняешь! Спасибо за уроки!
Отличный урок, огромное спасибо!
21к подписчиков, вы серьезно? Я бы сам денег на рекламу этого канала накинул, честное слово (я просто нищий, мне такое легко писать). Серьзно, я учусь в Германии на веб программиста, уровень Ваших уроков на 3 головы превосходит качество подачи материала моих доцентов!
Если есть желание помочь каналу - помогите, но если с деньгами туго, то лучше потратьте деньги на себя или детей! А за комментарий - спасибо!
Не знал что между картинками отступ в 4px. Также не знал что float убирает эти отступы. Спасибо!
А у меня почему-то розовый фон (на 7:57 видео) охватил только последний ряд, там где 1 картинка, хотя код один в один писал. Как так вышло не подскажете?
У меня не работает такой алгоритм. Движения нет и выдаётся ошибка
Uncaught TypeError: Cannot set property 'onclick' of null at 1.js:1
нашла ошибку. Оказывается забыла написать defer .
Александр, здравствуйте! Вы можете показать как сделать еще правую кнопку? По аналогии не получается сделать.
спасибо большое,благодаря вам теперь сделал то что хотел)
Доброго времени суток. подскажите, пожалуйста, пишу в Brackets, JS не видит команду sliderLeft. в консоли ошибка. и ничего не могу с этим поделать.
А выложите код на codepen. Посмотрю.
Благодарочка за такой годный контент!
Очень хорошие уроки. Спасибо Вам за материал = )
спасибо за урок, лайк и подписка!
СПАСИБО!!!!!! просто, понятно и красиво!
Почему то не работает стиль left в js. Пишет Cannot read property 'style' of null
at HTMLButtonElement.slaidLeft
defer не забываем
@@itgid если вы про атрибут в подключении скрипта, то он стоит
@@ИванИванов-б8ж3с тогда выкладывайте код на codepen - помогу
@@itgid codepen.io/Random_7845/pen/XyRWVZ
@@ИванИванов-б8ж3с вы js забыли скопировать.!
в гугле не получается что происходит не понимаю что не пробовал постоянно выдает ошибку синтаксиса
Спасибо Вам большое за видео!
Можно проще, к id #polosa задать параметр
overflow: hidden;
и не расписывать код
А как сделать так, чтоб картинки ассоциировались с точками слайдера?
Я бы использовал атрибут data. Дальше в плейлисте будет такое видео!
WebDev с нуля. Канал Алекса Лущенко Спасибо, гуру! Буду очень ждать.
Спасибо. Классный урок.
а как автоматически выставлять точку с запятой в конце команд css?
не знаю, даже не задумывался над этим - на подкорке проставить ; в конце строки.
Я вижу что у вас точка с запятой сама ставится в конце команды css). Впрочем, в процессе разбора ваших уроков я уже сам заметил некоторые фичи эммета. Спасибо за уроки!
это если автогенерация команды с помощью эммета. Я думал автоматом при переходе на другую строку.
Редкий случай когда ставлю лайк и оно того достойною
добрый день. Хотел бы задать вопрос, как создать такую же картинку поле конца прокруки.
var cases = document.getElementById('case');
document.getElementById('start-button').onclick = start;
var casesdraw = document.getElementById('cases1');
var left=0;
function start(){
left = left - 780;
if (left < -1580) {
создание картинки в классе case
}
cases.style.left = left + 'px';
}
yнашел код, но не могу разобраться как вставить фото не в body, а именно в класс case document.body вот сюда .appendChild(img);
function img() {
var img = document.createElement('img');
img.setAttribute('src', 'cases.png');
document.body.appendChild(img);
}
не совсем понял задачу. Заходите на телеграмм канал и напишите ее еще раз! t.me/jsrules
как сделать перелистование по кольцу ?
Отличные прикладные уроки, странно, что так мало подписчиков!
Только начали!
Благодарствую, хороший урок [(как обычно в принципе)]
лучший урок на свете
а как сделать чтобы он не начинал с начала - а шел в одну сторону постоянно ? пока догнать не получается
Добрый день. Такой вопрос. При инспектировании код выполняется, а визуально всё стоит на месте, слайдер не работает. Что это может быть?
уроки по этому плейлисту еще актуальны или лучше начать учить по 2.0?
отличный урок, спасибо!
Можно ли в Слайдер загружать картинки прямо с диска компьютера или с сервера, не прописывая заранее?
Здравствуйте! Алекс, а скажите как нам такой слайдер сделать адаптивным ведь у нас не картинки будут сжиматься а сама полоса и естественно картинки внутри будут сжиматься в месте с полосой ну и само собой полезут одна на вторую как быть в таком случаи если можете дайте ответ! спасибо
Благодарю за урок, очень доступно! Один момент не понял на 17:50. В CSS для #polosa задаём свойство со значением left: 0; чтобы transition работал плавно для всего блока. В чём логика? Может кто разъяснит...
Отличный урок
Отлично! Спасибо вам@
у меня почему то не хочет подключать файл style.css хотя создал в той же папке со всеми остальными файлами, в чём может быть проблема?
подключи файл css вот в таком порядке:
то есть поменяй местами тэги href и rel
а как адаптировать такой слайдер?
Добрый день!
Укажите на ошибку, почему клик в обратную сторону не срабатывает?
'use strict';
let btn = document.querySelector('#slider-left');
let btn2 = document.querySelector('#slider-right');
let left = 0;
let right = 0;
function sliderLeft(){
btn.addEventListener('click', function(){
let line = document.querySelector('#line');
left = left - 128;
if(left < -384){
left = 0;
}
line.style.left = left +'px';
})
}
function sliderRight(){
btn2.addEventListener('click', function(){
let line = document.querySelector('#line');
right = right + 128;
if(right > 384 ){
right = 0;
}
line.style.right = right + 'px';
})
}
sliderLeft();
sliderRight();
Подскажите почему в скрипте функция sliderLeft вызывается без ()? вроде как без скобок просто как переменная читается?
Смотрите, если вы говорите о присвоении события то я на событие onclick - присваиваю имя функции, а не выполняю ее.
Спасибо. А какие еще варианты присвоения существуют на onclick? я к чему, пока что в таком же виде присваиваются названия переменных, вот и удивительно стало, что по это выглядит именно как присвоение имени переменной, хотя логика подсказывает, что событию можно присвоить только действие.
А как вторую кнопку настроить?
Почему у меня ругается document.getElementById('slider-left').onclick = sliderLeft;
Cannot set property 'onclick' of null на sliderLeft
Подскажите плиз
а вы перенесите подключение javascript в нижнюю часть страницы перед закрывающимся тегом /body и все будет работать. Или добавьте атрибут defer.
JavaScript решает спс за ответ но я уже догадался .Я просто не написал defer.)))
Прикольно, было бы интересно еще аккордион и табы на ваниле js посмотреть.
Да, можно сделать.
Ребята, эта верстка актуальна? Просто точно также пишу и у меня пишет ошибку(
Сори за тупой вопрос, но, почему при задании флоат лефт схлопнулся контейнер этих елементов ?
все это конечно хорошо но если задать полосе ширину котороя больше ширины экрана то появляеться scroll снизу и это не очень как-то.
overflow очень неплохо работает в этом случае.
Курс актуален даже в 2020)
Спасибо за урок)
Здравствуйте, подскажите, пожалуйста, почему у меня не открывает картинки в html файле?
вернее у меня открылось только 1 изображение из трех
Значить неправильно прописаны src - пути к файлам.
в консоли у меня просто ошибок не выдает, тогда пути неправильные? просто я еще пробовал через ссылку и тоже не работает, одна из трех загружается только
я всё сначала переписал и заработало, как Вы и сказали ошибка в src, спасибо большое