Адаптивный слайдер на JavaScript
HTML-код
- Опубликовано: 8 фев 2025
- Курс JS 2.0: itgid.info/cou...
Курс HTML для JS разработчиков: itgid.info/cou...
Остальные курсы: itgid.info/
Телеграмм канал: t.me/itgid_info
Код на github: github.com/itg...
Адаптивный слайдер на Javascript. Урок - пишем адаптивный слайдер на JavaScript
Отличный слайдер с исходниками, лайк за контент! Ждём карусель с элементами свайп и затем контрольный для особенных(выживших) на реакте! Отдельная благодарность за объяснение продакшн вариантов!
Пока еще видео не смотрел - но большое спасибо - вы один из немногих чей голос воспринимаю не монотонно и с интересов + самое главное что информация актуальная и полезная!
Спасибо, как всегда, если, что-то нужно на проект, я иду ищу на данном канале видео и нахожу. Александр, большое спасибо, за видео.
Чудесно, дуже вдячний за чудово поданий матеріал
супер) именно то, что я искала как сделать через css и не понимала, почему не получается
спасибо за контент и отсутствие лишней информации)
Александр благадорим вас, за вашу непокорную работу !!!
просто красавчик! позновательно, все понятно, бел лишней воды и заумных речей👍
Слайдер моя больная тема, а тут всё шикарно подано! Интересно увидеть реализацию перехода после крайнего слайда, что бы слайдер не отматывался назад
Это, я бы сказал, МАСТХЭВ для новичков/изучающих JS и поэтому просто необходимо продолжение!
Спасибо за урок. Аж захотелось самому дописать вариант с заменой картинок на более узкие)
С Вами приятно иметь дело!
Очень круто!!!
Спасибо за Ваш труд :))
Очень нравятся практические уроки, когда и применить "в жизни" можно, и что-то новое для себя узнаешь. А еще очень люблю ваши предложения по самостоятельному улучшению урока и намеки, как это реализовать
Добрый вечер. Спасибо за вашу проделанную работу.
Хороший урок, было бы неплохо разобрать как сделать зацикленный слайдер, но без возвращения на стартовую или конечную позицию, а с продолжением движения в том же направлении, предполагаю что это как-то связанно с клонированием элементов. Спасибо)
как всегда бомба, разрыв мозга)спасибо!
Отличный урок, спасибо!
Огромное спасибо за урок!
Мужик я счтатю твои уроки самыми лучшими понятными и толковыми я только учу js и понимаю что ты пишешь особенно твои комментарии по типу " не буду светить в голбале "
Спасибо за ролик. Я взял ответ на многие вопросы.
Спасибо Вам за отличный урок! Одновременно подробно, понятно и, при этом, кратко! 💙💛
Отличные у вас видео! Интересный пример, доступное объяснение.
Спасибо большое!!!!
Спасибо за интересный урок!
Все детально и ясно, благодарю!
Спасибо, спасибо, спасибо! Очень Вам благодарен!
Да... Предыдущий ваш простой слайдер осилил. Этот пока что не подьемная гора. Много нового скрипта. Спасибо за уроки.
Большое спасибо вам, все как всегда круто!
Очень хотелось-бы посмотреть ваше видео про свойства по типу offsetWidth/height, lef, top, clientX, clientY
Гений, просто гений
Спасибо за урок. Подскажите, а будет продолжение про работу со слайдером через свайп? Это на мобильных устройствах намного актуальнее чем возможность попасть пальцем в кнопки смещения
Очень круто, что несмотря, на то что есть понимание, что такое допустим стрелочные функции вы Александр, применяете полный синтаксис, это очень влияет на понимание того, что происходит в коде, а то я много сталкивался с тем, что элементарно не понятно как работает код, только из за синтаксиса или иных сокращений, которые у меня как у новичка еще не в привычке)
Красава! Всё чётко!
Спасибо за труд !
очень подробный гайд по слайдеру автору огромное спасибо за труд но хотелось бы еще знать как добавить авто перелистывание слайдера по таймеру )
хотелось бы скорей про свайпы)
очень интересно
Лучший, как обычно.
просто божественно
невероятно круто. спасибо
Офигенный урок
Очень вовремя, спасибо)
супер спасибо за контент и труд
Саша как всегда молодец)
Саша Спасибо!
20 лайков эму джентльмену ))
Отличное видео. Есть вопрос - предложение. Если мы цепляем слушатель событий на window, то его потом нужно же удалить? Вы могли бы коснуться этой темы, как правильно и когда удалять слушатель?
Спасибо за урок, ваш слайдер самый понятный из всех! Подскажите пожалуйста, как сделать несколько слайдеров на одной странице? Хотелось бы использовать ваш подход, но с адаптацией под мульти-шмульти... 💣
Очень круто!!
Доброго времени суток. Так как я еще новичок в js, это видео то то надо. Но вот хотелось бы увидеть со свайп режимом, я пона не нашел на канале продолжения, может просто не заметил, но буду очень благодарен если дадите наводку))
Спасибо👍👍👍😁👍👍👍
Вы красава!😊
Следующие видео ролик был бы круто если показали бы про promise
Супер !
Спасибо!
Большое спасибо. Вы доходчиво объясняете и у меня все получается. Вопрос:
- по достижении слайдером последней картинки, count сбрасывается на ноль и слайдер плавно возвращается к первой картинке, при этом показывая все предыдущие. Как сделать, чтобы при нажатии кнопки next (prev) следующей (по ходу движения) показывалась первая (последняя) картинка?
Надеюсь правильно спросил.
привет, нашел ответ на свой вопрос?
@@NikitaShmidt-v4f нет. Есть другой слайдер с множеством функций, включая и эту.
@@AlekseyNaumov_734 ссылку на него сможете скинуть?
Оч круто!!!!
Кто-нибудь, подскажите пожалуйста, может я не увидела ролик. Где находится объяснение того как сделать слайдер со свайпами?
Зачем задавать ширину слайдера с помощью js? Можно просто в css задать 100%
Здравствуйте, очень круто объясняете все) Я конечно не придираюсь, но мне кажется или справа не хватает для картинки пару пикселей ? Как будто бордер перекрывает эту часть
мне тоже так показалось. Скорее всего не задан box-sizing
Failed to load resource: net::ERR_FILE_NOT_FOUND script.javascript:1
Отличное видео
А как сделать чтобы в мобильной версии можно было свайпом листать
👍
Спасибо за материал -отличная подача. Единстевенное не могу понять строчку кода sliderLine.style.transform = 'translate(-'+ count * width + 'px)'; . Почему translate представленна ввиде строки и тут тоже '+ count * width + ' строка? Запутался
@Evil Deeds спасибо!
Почему offsetWidth, а не clientWidth? Ведь offsetWidth задаёт бОльшую ширину картинкам (включая отступ, рамку и полосу прокрутки - если есть).
подскажите, как сделать, чтобы при просмотре последнего изображения и нажатии на кнопку "вперед", слайдер не возвращался к первому изображению через все изображения, а как-бы перетаскивал первое изображение за последним. и тем самым выглядело бы еще лучше
(что-то вроде итерации).
Там не получится легко переделать. Вам придется подставлять следующие и предидущие картинки на лету по клику.
мне тоже интересно узнать, как это реализовать, буду пробовать сейчас делать слайдер такой)
Как сделать слайдер для карточек товаров, не очень получается сделать к примеру слайдер чтобы скроллил по 3 карточки, а при уменьшении экрана переходил на 2 карточки а потом на одну
подскажите пожалуйста transform нужно прописывать в стилях, а то у меня вылезает ошибка Cannot set property 'transform' of undefined
Ребят, может кто подсказать почему в функции roleSlider мы умножаем count на width и оно работает? Ведь по идее, оно должно прокрутиться на две ширины, если count 2, на три, если count три, и так далее. Ответьте пожалуйста, если есть кто из 2022!!!!!
мы каждым действием создаём снова стиль transform = 'translate(-' + count * width + 'px)' этим самым задаём на какой позиции должна быть слайдер-линия. При одном нажатии на кнопку слайдер-линия передвинута на одну ширину слайдера, при двух на две ширины при трёх на три и т.д. Мы не суммируем, а каждый раз снова создаём стиль для слайдер линии с новым значением transform = 'translate(-' + count * width + 'px)'
Может кто то пояснит, что за синтаксис такой мне не понятно почему кавычки закрываются после скобок, для чего это нужно?
' translate(-' + x * y + 'px)'
не получается задать ширину элементу
Александр.вы сами на первых порах до этого додумались или это тоже передача опыта?
Всем привет может ктонибудь знает почему выдает ошибку в строке
sliderLine.style.width = width * images.length + 'px';
А как сделать, чтобы слайдер при полной прокрутки не прокручивался назад, а переключал на первую картинку в том же потоке
А как сделать, чтобы на десктопной версии отображались 3 изображения, на планшете - 2, а на мобильной версии - одно изображение?
Это делается при помощи css медиа-запросов @media, в которых манипулируете размерами блоков для разных экранов.
один вариант - медиа. Второй - у вас есть width и сount - и мы вмещать можем любое количество и комбинировать их. Сейчас мы присваиваем каждому изображению width ширину, хотите 2 изображения? Присваивайте width / 2
@@malina-malinovaia спасибо.
@@itgid спасибо.
Алекс сделайте видео со слайдером и обработчиком onpointer. Чтоб слайдер можно было листать движение мышки или пальцев на таче.
Досмотрел видео до конца и Вы там сказали что сделаете это в след уроке)
а можно трэк на фоне?
доработал слайдер для листания пальцами на мобильнике. На компе в эмуляторе работает, а на мобильнике нет. В чем может быть дело?
А нельзя ли сделать ширину картинки в CSS просто 100% ?
like+ good job
А где найти видео где слайдер по свайпу будет перелистываться?
Я в шоке был, что Розетке используют div в который вставляют img для разных девайсов. Я даже пошел сам посмотрел, не поверил сразу. Там ведь платят разработчикам не мало денег, а они даже не могут оптимизировать баннер на главной странице.... Жесть.
А вам бы все таки нужно было про это сказать или хотя бы предупредить, что бы люди не повторяли такие глупости.
Ш И К А Р Н О!
А по чему бы не задать изображениям ширину 100 % высоту авто в css и без js можно обойтись
А вы закиньте в jsfiddle и проверьте, что именно отвалиться при этом.
А нельзя все манипуляции с размерами сделать на чистом css? Если у пользователя отвалится js, он увидит страшный и поломанный слайдер.
Как кнопки переместить, одну с левого края, другую в правый) это тоже сделайте )
для кнопок задай 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
Огромное спасибо! очень просто и разжевано!