Отличный слайдер с исходниками, лайк за контент! Ждём карусель с элементами свайп и затем контрольный для особенных(выживших) на реакте! Отдельная благодарность за объяснение продакшн вариантов!
Пока еще видео не смотрел - но большое спасибо - вы один из немногих чей голос воспринимаю не монотонно и с интересов + самое главное что информация актуальная и полезная!
Очень нравятся практические уроки, когда и применить "в жизни" можно, и что-то новое для себя узнаешь. А еще очень люблю ваши предложения по самостоятельному улучшению урока и намеки, как это реализовать
Мужик я счтатю твои уроки самыми лучшими понятными и толковыми я только учу js и понимаю что ты пишешь особенно твои комментарии по типу " не буду светить в голбале "
Хороший урок, было бы неплохо разобрать как сделать зацикленный слайдер, но без возвращения на стартовую или конечную позицию, а с продолжением движения в том же направлении, предполагаю что это как-то связанно с клонированием элементов. Спасибо)
Очень круто, что несмотря, на то что есть понимание, что такое допустим стрелочные функции вы Александр, применяете полный синтаксис, это очень влияет на понимание того, что происходит в коде, а то я много сталкивался с тем, что элементарно не понятно как работает код, только из за синтаксиса или иных сокращений, которые у меня как у новичка еще не в привычке)
Спасибо за урок. Подскажите, а будет продолжение про работу со слайдером через свайп? Это на мобильных устройствах намного актуальнее чем возможность попасть пальцем в кнопки смещения
подскажите, как сделать, чтобы при просмотре последнего изображения и нажатии на кнопку "вперед", слайдер не возвращался к первому изображению через все изображения, а как-бы перетаскивал первое изображение за последним. и тем самым выглядело бы еще лучше (что-то вроде итерации).
Как сделать слайдер для карточек товаров, не очень получается сделать к примеру слайдер чтобы скроллил по 3 карточки, а при уменьшении экрана переходил на 2 карточки а потом на одну
Отличное видео. Есть вопрос - предложение. Если мы цепляем слушатель событий на window, то его потом нужно же удалить? Вы могли бы коснуться этой темы, как правильно и когда удалять слушатель?
Доброго времени суток. Так как я еще новичок в js, это видео то то надо. Но вот хотелось бы увидеть со свайп режимом, я пона не нашел на канале продолжения, может просто не заметил, но буду очень благодарен если дадите наводку))
Может кто то пояснит, что за синтаксис такой мне не понятно почему кавычки закрываются после скобок, для чего это нужно? ' translate(-' + x * y + 'px)'
Спасибо за урок, ваш слайдер самый понятный из всех! Подскажите пожалуйста, как сделать несколько слайдеров на одной странице? Хотелось бы использовать ваш подход, но с адаптацией под мульти-шмульти... 💣
один вариант - медиа. Второй - у вас есть width и сount - и мы вмещать можем любое количество и комбинировать их. Сейчас мы присваиваем каждому изображению width ширину, хотите 2 изображения? Присваивайте width / 2
Большое спасибо. Вы доходчиво объясняете и у меня все получается. Вопрос: - по достижении слайдером последней картинки, count сбрасывается на ноль и слайдер плавно возвращается к первой картинке, при этом показывая все предыдущие. Как сделать, чтобы при нажатии кнопки next (prev) следующей (по ходу движения) показывалась первая (последняя) картинка? Надеюсь правильно спросил.
Спасибо за материал -отличная подача. Единстевенное не могу понять строчку кода sliderLine.style.transform = 'translate(-'+ count * width + 'px)'; . Почему translate представленна ввиде строки и тут тоже '+ count * width + ' строка? Запутался
Ребят, может кто подсказать почему в функции roleSlider мы умножаем count на width и оно работает? Ведь по идее, оно должно прокрутиться на две ширины, если count 2, на три, если count три, и так далее. Ответьте пожалуйста, если есть кто из 2022!!!!!
мы каждым действием создаём снова стиль transform = 'translate(-' + count * width + 'px)' этим самым задаём на какой позиции должна быть слайдер-линия. При одном нажатии на кнопку слайдер-линия передвинута на одну ширину слайдера, при двух на две ширины при трёх на три и т.д. Мы не суммируем, а каждый раз снова создаём стиль для слайдер линии с новым значением transform = 'translate(-' + count * width + 'px)'
Здравствуйте, очень круто объясняете все) Я конечно не придираюсь, но мне кажется или справа не хватает для картинки пару пикселей ? Как будто бордер перекрывает эту часть
Я в шоке был, что Розетке используют div в который вставляют img для разных девайсов. Я даже пошел сам посмотрел, не поверил сразу. Там ведь платят разработчикам не мало денег, а они даже не могут оптимизировать баннер на главной странице.... Жесть. А вам бы все таки нужно было про это сказать или хотя бы предупредить, что бы люди не повторяли такие глупости.
Привет, я твой подписчик, редко пишу комментарии. Я могу убеждать тебя что в Україні убивают детей та мирное население русские солдаты, что это геноцид, но я здесь и вижу все это своими глазами. Верить мне не надо, прошу проверь сам, найди разные источники, пообщайся с разними людьми, почему доллар за 100, сравни за и против, и сейчас твое молчание стоит кому-то жизни, прошу НЕ МОЛЧИ… Слава Україні.
@@DavitAve kak toko vklucayu toggle device vse plivet vlevo vpravo i proverayu izobrajeniya na rznih ustroystvah pokazanovezde po raznomu cherez @media toje ne poluchilos
![Как самому создать адаптивный СЛАЙДЕР за 15 минут [HTML, CSS, JS] ссылка в описании](/img/n.gif)
Отличный слайдер с исходниками, лайк за контент! Ждём карусель с элементами свайп и затем контрольный для особенных(выживших) на реакте! Отдельная благодарность за объяснение продакшн вариантов!
Пока еще видео не смотрел - но большое спасибо - вы один из немногих чей голос воспринимаю не монотонно и с интересов + самое главное что информация актуальная и полезная!
Спасибо, как всегда, если, что-то нужно на проект, я иду ищу на данном канале видео и нахожу. Александр, большое спасибо, за видео.
супер) именно то, что я искала как сделать через css и не понимала, почему не получается
спасибо за контент и отсутствие лишней информации)
Спасибо за урок. Аж захотелось самому дописать вариант с заменой картинок на более узкие)
Слайдер моя больная тема, а тут всё шикарно подано! Интересно увидеть реализацию перехода после крайнего слайда, что бы слайдер не отматывался назад
Александр благадорим вас, за вашу непокорную работу !!!
Это, я бы сказал, МАСТХЭВ для новичков/изучающих JS и поэтому просто необходимо продолжение!
Чудесно, дуже вдячний за чудово поданий матеріал
просто красавчик! позновательно, все понятно, бел лишней воды и заумных речей👍
Очень нравятся практические уроки, когда и применить "в жизни" можно, и что-то новое для себя узнаешь. А еще очень люблю ваши предложения по самостоятельному улучшению урока и намеки, как это реализовать
Мужик я счтатю твои уроки самыми лучшими понятными и толковыми я только учу js и понимаю что ты пишешь особенно твои комментарии по типу " не буду светить в голбале "
С Вами приятно иметь дело!
Добрый вечер. Спасибо за вашу проделанную работу.
Очень круто!!!
Спасибо за Ваш труд :))
Да... Предыдущий ваш простой слайдер осилил. Этот пока что не подьемная гора. Много нового скрипта. Спасибо за уроки.
Спасибо Вам за отличный урок! Одновременно подробно, понятно и, при этом, кратко! 💙💛
как всегда бомба, разрыв мозга)спасибо!
Хороший урок, было бы неплохо разобрать как сделать зацикленный слайдер, но без возвращения на стартовую или конечную позицию, а с продолжением движения в том же направлении, предполагаю что это как-то связанно с клонированием элементов. Спасибо)
Отличный урок, спасибо!
Спасибо за ролик. Я взял ответ на многие вопросы.
Гений, просто гений
Отличные у вас видео! Интересный пример, доступное объяснение.
Спасибо, спасибо, спасибо! Очень Вам благодарен!
Огромное спасибо за урок!
Спасибо большое!!!!
Все детально и ясно, благодарю!
Спасибо за интересный урок!
Большое спасибо вам, все как всегда круто!
Очень круто, что несмотря, на то что есть понимание, что такое допустим стрелочные функции вы Александр, применяете полный синтаксис, это очень влияет на понимание того, что происходит в коде, а то я много сталкивался с тем, что элементарно не понятно как работает код, только из за синтаксиса или иных сокращений, которые у меня как у новичка еще не в привычке)
Спасибо за урок. Подскажите, а будет продолжение про работу со слайдером через свайп? Это на мобильных устройствах намного актуальнее чем возможность попасть пальцем в кнопки смещения
Кто-нибудь, подскажите пожалуйста, может я не увидела ролик. Где находится объяснение того как сделать слайдер со свайпами?
Failed to load resource: net::ERR_FILE_NOT_FOUND script.javascript:1
Красава! Всё чётко!
Очень хотелось-бы посмотреть ваше видео про свойства по типу offsetWidth/height, lef, top, clientX, clientY
очень подробный гайд по слайдеру автору огромное спасибо за труд но хотелось бы еще знать как добавить авто перелистывание слайдера по таймеру )
хотелось бы скорей про свайпы)
очень интересно
Офигенный урок
просто божественно
Лучший, как обычно.
Спасибо за труд !
подскажите пожалуйста transform нужно прописывать в стилях, а то у меня вылезает ошибка Cannot set property 'transform' of undefined
Саша Спасибо!
подскажите, как сделать, чтобы при просмотре последнего изображения и нажатии на кнопку "вперед", слайдер не возвращался к первому изображению через все изображения, а как-бы перетаскивал первое изображение за последним. и тем самым выглядело бы еще лучше
(что-то вроде итерации).
Там не получится легко переделать. Вам придется подставлять следующие и предидущие картинки на лету по клику.
мне тоже интересно узнать, как это реализовать, буду пробовать сейчас делать слайдер такой)
Как сделать слайдер для карточек товаров, не очень получается сделать к примеру слайдер чтобы скроллил по 3 карточки, а при уменьшении экрана переходил на 2 карточки а потом на одну
супер спасибо за контент и труд
Саша как всегда молодец)
невероятно круто. спасибо
Очень вовремя, спасибо)
Отличное видео. Есть вопрос - предложение. Если мы цепляем слушатель событий на window, то его потом нужно же удалить? Вы могли бы коснуться этой темы, как правильно и когда удалять слушатель?
А где найти видео где слайдер по свайпу будет перелистываться?
Очень круто!!
Доброго времени суток. Так как я еще новичок в js, это видео то то надо. Но вот хотелось бы увидеть со свайп режимом, я пона не нашел на канале продолжения, может просто не заметил, но буду очень благодарен если дадите наводку))
Супер !
не получается задать ширину элементу
Может кто то пояснит, что за синтаксис такой мне не понятно почему кавычки закрываются после скобок, для чего это нужно?
' translate(-' + x * y + 'px)'
доработал слайдер для листания пальцами на мобильнике. На компе в эмуляторе работает, а на мобильнике нет. В чем может быть дело?
А как сделать, чтобы слайдер при полной прокрутки не прокручивался назад, а переключал на первую картинку в том же потоке
Спасибо за урок, ваш слайдер самый понятный из всех! Подскажите пожалуйста, как сделать несколько слайдеров на одной странице? Хотелось бы использовать ваш подход, но с адаптацией под мульти-шмульти... 💣
а можно трэк на фоне?
Вы красава!😊
Спасибо👍👍👍😁👍👍👍
А как сделать, чтобы на десктопной версии отображались 3 изображения, на планшете - 2, а на мобильной версии - одно изображение?
Это делается при помощи css медиа-запросов @media, в которых манипулируете размерами блоков для разных экранов.
один вариант - медиа. Второй - у вас есть width и сount - и мы вмещать можем любое количество и комбинировать их. Сейчас мы присваиваем каждому изображению width ширину, хотите 2 изображения? Присваивайте width / 2
@@malina-malinovaia спасибо.
@@itgid спасибо.
Большое спасибо. Вы доходчиво объясняете и у меня все получается. Вопрос:
- по достижении слайдером последней картинки, count сбрасывается на ноль и слайдер плавно возвращается к первой картинке, при этом показывая все предыдущие. Как сделать, чтобы при нажатии кнопки next (prev) следующей (по ходу движения) показывалась первая (последняя) картинка?
Надеюсь правильно спросил.
привет, нашел ответ на свой вопрос?
@@NikitaShmidt-v4f нет. Есть другой слайдер с множеством функций, включая и эту.
@@AlekseyNaumov_734 ссылку на него сможете скинуть?
Отличное видео
А как сделать чтобы в мобильной версии можно было свайпом листать
А нельзя ли сделать ширину картинки в CSS просто 100% ?
Всем привет может ктонибудь знает почему выдает ошибку в строке
sliderLine.style.width = width * images.length + 'px';
20 лайков эму джентльмену ))
Оч круто!!!!
Спасибо!
Спасибо за материал -отличная подача. Единстевенное не могу понять строчку кода sliderLine.style.transform = 'translate(-'+ count * width + 'px)'; . Почему translate представленна ввиде строки и тут тоже '+ count * width + ' строка? Запутался
@Evil Deeds спасибо!
Зачем задавать ширину слайдера с помощью js? Можно просто в css задать 100%
Почему offsetWidth, а не clientWidth? Ведь offsetWidth задаёт бОльшую ширину картинкам (включая отступ, рамку и полосу прокрутки - если есть).
Следующие видео ролик был бы круто если показали бы про promise
Ребят, может кто подсказать почему в функции roleSlider мы умножаем count на width и оно работает? Ведь по идее, оно должно прокрутиться на две ширины, если count 2, на три, если count три, и так далее. Ответьте пожалуйста, если есть кто из 2022!!!!!
мы каждым действием создаём снова стиль transform = 'translate(-' + count * width + 'px)' этим самым задаём на какой позиции должна быть слайдер-линия. При одном нажатии на кнопку слайдер-линия передвинута на одну ширину слайдера, при двух на две ширины при трёх на три и т.д. Мы не суммируем, а каждый раз снова создаём стиль для слайдер линии с новым значением transform = 'translate(-' + count * width + 'px)'
Александр.вы сами на первых порах до этого додумались или это тоже передача опыта?
👍
Ш И К А Р Н О!
Здравствуйте, очень круто объясняете все) Я конечно не придираюсь, но мне кажется или справа не хватает для картинки пару пикселей ? Как будто бордер перекрывает эту часть
мне тоже так показалось. Скорее всего не задан box-sizing
А нельзя все манипуляции с размерами сделать на чистом css? Если у пользователя отвалится js, он увидит страшный и поломанный слайдер.
like+ good job
А по чему бы не задать изображениям ширину 100 % высоту авто в css и без js можно обойтись
А вы закиньте в jsfiddle и проверьте, что именно отвалиться при этом.
Да ну... и где код?
Алекс сделайте видео со слайдером и обработчиком onpointer. Чтоб слайдер можно было листать движение мышки или пальцев на таче.
Досмотрел видео до конца и Вы там сказали что сделаете это в след уроке)
Я в шоке был, что Розетке используют div в который вставляют img для разных девайсов. Я даже пошел сам посмотрел, не поверил сразу. Там ведь платят разработчикам не мало денег, а они даже не могут оптимизировать баннер на главной странице.... Жесть.
А вам бы все таки нужно было про это сказать или хотя бы предупредить, что бы люди не повторяли такие глупости.
Как кнопки переместить, одну с левого края, другую в правый) это тоже сделайте )
для кнопок задай float left и right соответсвенно
Извиняюсь, нашел кажись)))
3:55
4:34
ставь лайк, если смотрел в X2
Привет, я твой подписчик, редко пишу комментарии. Я могу убеждать тебя что в Україні убивают детей та мирное население русские солдаты, что это геноцид, но я здесь и вижу все это своими глазами. Верить мне не надо, прошу проверь сам, найди разные источники, пообщайся с разними людьми, почему доллар за 100, сравни за и против, и сейчас твое молчание стоит кому-то жизни, прошу НЕ МОЛЧИ… Слава Україні.
ni hrena ne rabotaet dislayk
Chto imenno ne rabotaet brad
@@DavitAve kak toko vklucayu toggle device vse plivet vlevo vpravo i proverayu izobrajeniya na rznih ustroystvah pokazanovezde po raznomu cherez @media toje ne poluchilos
Огромное спасибо! очень просто и разжевано!