Пишем простой слайдер на JS и CSS!

แชร์
ฝัง
  • เผยแพร่เมื่อ 24 ธ.ค. 2024

ความคิดเห็น • 183

  • @Павел-ф4щ9ъ
    @Павел-ф4щ9ъ 3 ปีที่แล้ว +45

    У тебя талант объяснять. Очень качественный контент, коротко и ясно без лишней воды, мне кажется даже далёкий человек от программирования сможет понять без проблем.
    Спасибо большое за уроки!

    • @YaroslavEx
      @YaroslavEx 2 ปีที่แล้ว +2

      соглашусь, приятно слушать.

    • @seron4206
      @seron4206 2 ปีที่แล้ว

      @@YaroslavEx Привет, давно изучаешь js?

  • @MobileLegendsImmortal
    @MobileLegendsImmortal ปีที่แล้ว +1

    вы просто супер! столько перерыл, вообще самообразование это такая___ не верьте никому, что информации в интернете куча, вам не узнать на сколько она актуальная пока не узнаете))))) с куратором, преподом, учителем вы сразу учите как работает, а сами вы будете вторым Эдисоном и найдете тысячу способов, которые не работают. Только не надо умничать, типо опыта больше, мне как-то не нужно к опыту знать, что кота в микроволновые греть нельзя. В общем я к чему. эти 16 минут просто были как мана небесная среди всего конвента, посмотрю обязательно следующий о динамическом слайдера, что мне очень нужно.) Вы супер! А остальные учитесь с кем-то, не тратьте время.

  • @trendsgallery
    @trendsgallery 2 ปีที่แล้ว +5

    Я посмотрел 4 урока как сделать слайдер конкретно на Js и Css, без доп. библиотек и это единственный понятный ролик, который я смог реализовать в последствии и осознать всю конструкцию. Спасибо вам, Алекс Лущенко!

  • @ThevideOoLoadeR
    @ThevideOoLoadeR 3 ปีที่แล้ว +10

    Я просто в шоке от такого грамотного разъяснения. После просмотра урока JS мне показался не таким уж и страшным. Спасибо))

  • @pyndykmisha
    @pyndykmisha 3 ปีที่แล้ว +3

    В основном, очень даже хорошо! Нашел то что искал, все просто и понятно, к примеру другие люди обьясняют не понятные команды и функции новичкам, а тут прям не к чему придраться! СПАСИБО!

  • @РегимРагимов
    @РегимРагимов 4 ปีที่แล้ว +5

    Насколько же понятно вы объясняете, просто лучший

  • @beduingreen
    @beduingreen 9 หลายเดือนก่อน

    БОЛЬШОЕ спасибо вам! Сколько видео посмотрел,никак не могу понять механизм слайдера.Только вы смогли мне доходчиво обьяснить сложное для меня тему! Подписался и поставил лайк!

  • @yatut4467
    @yatut4467 3 ปีที่แล้ว +1

    Спасибо большое. Целый день искал примеры слайдера с анимацией, у всех громоздкие примеры по 200+ строк js кода при чем итоговый результат не лучше, а у Вас все кратко и доступно.

  • @niceman5890
    @niceman5890 2 ปีที่แล้ว +1

    Спасибо, хорошо объяснили, что такое слайдер.

  • @Руслан-ч4я9ф
    @Руслан-ч4я9ф 3 ปีที่แล้ว +6

    Я в восторге от видео, все очень понятно и доступно объяснено

  • @BigTrick1988
    @BigTrick1988 4 ปีที่แล้ว +13

    доступно и понятно. Спасибо )

  • @PreLeks
    @PreLeks 2 ปีที่แล้ว

    Не зря подписался: чётко, быстро, минимум бла-бла-бла, всё по делу. Спасибо, что Вы есть!!!

  • @major_2143
    @major_2143 4 ปีที่แล้ว +2

    Полезный совет: 13:34 мин. видео. Для перемещения строк по документу вверх или вниз, нужно кликнуть ЛКМ между любыми элементами нужной строки(курсор мигает) и удерживая левый Alt перемещать стрелками вверх или вниз. Сделал свой слайдер по Вашему уроку с десятком картинок - получилось.

  • @DmSychov
    @DmSychov 3 ปีที่แล้ว +1

    Алекс подписался на ваш канал
    Лучшего преподавания программирования я не видел!
    Спасибо

  • @chev_chelios
    @chev_chelios 9 หลายเดือนก่อน

    Супер! Огромное спасибо. Делаю сайт, все делаю на чистом js, не в первый раз выручаете.

  • @Arks_kr
    @Arks_kr 2 ปีที่แล้ว

    Вы супер! Всегда всё получается с первого раза! Всё понятно и доступно объясняете. Учусь на front-end разработчика и Ваш канал очень помогает мне справляться с трудностями. Спасибо Вам! Здоровья!

  • @Anatoli-bq1pe
    @Anatoli-bq1pe ปีที่แล้ว

    Этот канал просто находка) Благодарю!

  • @Вячеслав-ч1м
    @Вячеслав-ч1м 4 หลายเดือนก่อน

    Александр спасибо большое, очень просто все объяснили. Лучший урок на ютубе.

  • @1_dimasik_1
    @1_dimasik_1 3 ปีที่แล้ว

    Это самое простое и доступное видео про слайдер, которое я видел

  • @ВероникаЧернобай-ъ8л
    @ВероникаЧернобай-ъ8л 3 ปีที่แล้ว +3

    ВСЕ ЧОТКО, то что надо без воды!!!!!Люблю! Спасибо, всегда выручают ваши простые уроки и js не кажется таким злодеем.

  • @spicyeric9063
    @spicyeric9063 11 หลายเดือนก่อน

    От души. Теперь всё понятно . Написал свой первый слайдер.

  • @alexzav1327
    @alexzav1327 ปีที่แล้ว

    Спасибо за видео! Очень просто и понятно. Я пытался сделать слайдер самостоятельно и всё не мог догадаться как отключить видимость слайдера за пределами родительского блока )

  • @АнастасияШелухина-з7е
    @АнастасияШелухина-з7е 2 ปีที่แล้ว

    отлично - смотрю 5-ое видео про слайдер и только тут все стало понятно) спасибо!

  • @mind150
    @mind150 4 ปีที่แล้ว +2

    Спасибо. Учусь у вас 5 дней!
    Это лучшее, что есть в онлайн обучении!!
    Откуда у вас на все хватает времени?))

    • @itgid
      @itgid  4 ปีที่แล้ว +7

      Да просто не сплю
      Уже 3 года.

    • @mind150
      @mind150 4 ปีที่แล้ว +2

      @@itgid а так можно?))

  • @pastyrMisha
    @pastyrMisha 3 ปีที่แล้ว +2

    Шикарно! Просто шикарно! Спасибо Вам!!!

  • @jinke5935
    @jinke5935 4 ปีที่แล้ว

    О, прикольно! Всегда интересно смотреть на Вашем канале такие мини-видео-лайфхаки.

  • @КамилаИзмайлова-з9т
    @КамилаИзмайлова-з9т 2 ปีที่แล้ว +2

    Спасибо вам огромное за столь понятное объяснение!

  • @movieschanel8370
    @movieschanel8370 4 ปีที่แล้ว +1

    Всех с 2021 годом. Интересно было посмотреть такой или примерно слайдер с подгрузкой контента из базы данных

  • @MrFussy333
    @MrFussy333 3 ปีที่แล้ว

    Лучший видеоролик о слайдерах на чистом js! Удачи автору!!!

  • @БогданЯцентюк-ч9ч
    @БогданЯцентюк-ч9ч ปีที่แล้ว

    Спасибо! Всё просто и доходчиво, без лишних нюансов. Новичкам особенно актуальная такая подача информации

  • @zimabezsnega
    @zimabezsnega 3 ปีที่แล้ว +1

    Спасибо большое, как же приятно смотреть такие видео всё быстро, понятно , без воды и главное что работает спасибо вам большое!!!

  • @ИгорьГлазков-с1б
    @ИгорьГлазков-с1б 3 ปีที่แล้ว

    Спасибо. Здоровья Вам и процветание каналу.

  • @agataageeva424
    @agataageeva424 3 ปีที่แล้ว +2

    Спасибо вам большое, Алекс) слайдер, JS, css

  • @Дима-э1ы5ж
    @Дима-э1ы5ж 3 ปีที่แล้ว

    Какой же ты крутой! Все понятно, весь код объясняешь!

  • @Дмитрий-л4с9х
    @Дмитрий-л4с9х 2 ปีที่แล้ว

    Спасибо! Очень понятно и доступно. Получилось реализовать в моём учебном проекте.

  • @NIkolaiDu
    @NIkolaiDu ปีที่แล้ว

    спасибо огромное! получилось! а главное - понял как это вообще работает)

  • @st0nedcreature17
    @st0nedcreature17 ปีที่แล้ว

    Огромное спасибо, Александр, отличное объяснение, обнял.

  • @awenn2015
    @awenn2015 3 ปีที่แล้ว

    Я вроде не такой уж и новичок но ни разу не пробовал писать слайдер, уже все сделал и лайтбокс адаптивный и галерею динамическую и смену изображения при наведении для товарки а слайдер так и не пробовал , теперь думаю сделаю что-нибудь интересное )) спасибо за урок

  • @kov1k468
    @kov1k468 2 ปีที่แล้ว

    Самое простое объяснение, спасибо за ваш труд !

  • @jr9032
    @jr9032 3 ปีที่แล้ว +7

    Супер! Огромное спасибо! Просто, функционально, доступно для понимания новичку и что самое главное без "черной магии")))

  • @ДмитрийВолокитин-я8ф
    @ДмитрийВолокитин-я8ф 3 ปีที่แล้ว

    Всегда приятно смотреть и учиться у вас. Спасибо большое.

  • @ИльяВолобуев-ю8ц
    @ИльяВолобуев-ю8ц 4 ปีที่แล้ว +1

    Круто, жду следующий ролик!

  • @nataliyataranina57
    @nataliyataranina57 2 ปีที่แล้ว

    Боже мой!!! Как здорово, что я Вас нашла!!! огромное СПАСИБО!!!, за очень доступное и подробное объяснение!!!

    • @digitalturkistan1857
      @digitalturkistan1857 2 ปีที่แล้ว +1

      Наташа Таранина меняет профессию

  • @МаринаФедорчук-б6п
    @МаринаФедорчук-б6п 2 ปีที่แล้ว

    Спасибо большое! Все предельно понятно. И все работает!

  • @maksmaksim4803
    @maksmaksim4803 4 ปีที่แล้ว

    Жду с нетерпением дальше уроков по слайдерам

  • @OrhanDavidov
    @OrhanDavidov 9 หลายเดือนก่อน

    Скажите пожалуйста, как сделать чтобы ширина общего блока была не только для одной картины, например для 5 ти ?

  • @АлексейЛоскутников-ю4р
    @АлексейЛоскутников-ю4р 3 ปีที่แล้ว +3

    Спасибо, что вы делаете из магии простые вещи!

  • @dmitriystoyanov933
    @dmitriystoyanov933 3 ปีที่แล้ว

    Давно уже прошёл все эти начальные темы изучения фронта, но всегда круто по Вашим урокам освежить всё в памяти при необходимости, очень доступно и понятно. Один из лучших каналов по теме!

  • @user-Natalia11
    @user-Natalia11 4 ปีที่แล้ว +12

    Спасибо за ваши уроки. Доступно и понятно даже новичкам.

    • @itgid
      @itgid  4 ปีที่แล้ว +3

      Спасибо - именно в этом и вижу цель канала - учить начинающих.

    • @denysivashchenko2080
      @denysivashchenko2080 4 ปีที่แล้ว

      @@itgid И у Вас это великолепно получается ) я как ваш студент могу это подтвердить )

  • @lorentte77
    @lorentte77 2 ปีที่แล้ว +1

    спасибо большое помогли )

  • @ЕкатеринаГуськова-н7п
    @ЕкатеринаГуськова-н7п ปีที่แล้ว

    Очень круто объяснено!!

  • @StudyMan-ul1ls
    @StudyMan-ul1ls ปีที่แล้ว

    Видео достойное лайка! Всё четко и понятно! Это как раз то, что нужно для новичков!

  • @aleksarfin4419
    @aleksarfin4419 2 ปีที่แล้ว +5

    Спасибо за урок, смотрел много видео но только с этим методом всё просто и понятно. Можете пожалуйста подсказать как сделать чтобы при переходе с последней картинки не было перелистования через все картинки а сразу переходила на первую

  • @yusif4183
    @yusif4183 4 ปีที่แล้ว +2

    Очень крутое видео. Интересно и полезно.

  • @veranikamalazhavaya1379
    @veranikamalazhavaya1379 3 ปีที่แล้ว

    Спасибо за доступное объяснение!!!

  • @s_romanov_niko
    @s_romanov_niko 2 ปีที่แล้ว

    Очень подробно и просто! Спасибо!

  • @rk_projects
    @rk_projects 4 ปีที่แล้ว +16

    Спасибо, самый быстрый способ, везде городят кучу кода и тд, у вас все просто и понятно. Давно подписан на ваш канал, с помощью ваших уроков пишу интернет магазин, вы вносите неоценимый вклад 👍
    Подскажите ещё один момент, насколько сложно будет добавить отслеживание Touch событий на слайдере, чтобы работал на смартфонах простым свайпом по фото влево и вправо.

    • @itgid
      @itgid  4 ปีที่แล้ว +3

      не сложно совсем. Этот слайдер даже на смартах с тачем сработает. А swipe требует дописать пару функий.

    • @rk_projects
      @rk_projects 4 ปีที่แล้ว

      @@itgid Если будет в дальнейшем ваш урок с этим, то будет супер! Спасибо вам!

  • @nso655
    @nso655 4 ปีที่แล้ว +2

    Спасибо) То что нужно!

    • @itgid
      @itgid  4 ปีที่แล้ว +1

      Спасибо!

  • @the-tata
    @the-tata 2 ปีที่แล้ว

    Обожаю ваши объяснения. Вы учитель от Бога. Большое спасибо.

  • @Js_Developerrr
    @Js_Developerrr 2 ปีที่แล้ว +1

    а как сделать стрелки если не трудно жду ответа 🙏

  • @flogger2367
    @flogger2367 3 ปีที่แล้ว

    Привет, хороший канал в плане подачи, голоса и знаний, особенно для падаванов и джунов... Как всегда лайк

  • @ОльгитаТатарченко-ъ2э
    @ОльгитаТатарченко-ъ2э 2 ปีที่แล้ว

    Спасибо автору и Всем успехов

  • @Morfley
    @Morfley ปีที่แล้ว +2

    У меня почему то ошибка вылазит

  • @lotvaplotol5578
    @lotvaplotol5578 4 ปีที่แล้ว +7

    Очень интересует слайдер с фото разных размеров, автору здоровья и процветания в Новом году!

  • @vlad-zf1ev
    @vlad-zf1ev 3 ปีที่แล้ว

    супер, отличная подача материала.

  • @artemkamyshenkov3492
    @artemkamyshenkov3492 2 ปีที่แล้ว

    спасибо Вам большое за урок!

  • @mickzc7064
    @mickzc7064 3 ปีที่แล้ว

    Сенсей ты лучший !

  • @sonlik1344
    @sonlik1344 3 ปีที่แล้ว +1

    Нужна помощь, как сделать чтобы этот код применялся не на первый класс который он увидел, а на все?

  • @dm92mk
    @dm92mk 2 ปีที่แล้ว +1

    плохо что картинки от первой к последней скачут через все промежуточные

  • @v_katkov
    @v_katkov ปีที่แล้ว

    Крут! Хорошо пояснил!

  • @MaximSamp
    @MaximSamp 3 ปีที่แล้ว

    style.left не котируется VS. Cannot read property 'style' of null at HTMLButtonElement.

  • @sergeygetman1973
    @sergeygetman1973 3 ปีที่แล้ว

    не думал что на CSS так можно юзать JS...лайк однозначно, а новичкам можно в качестве портфолио на git.hub заливать, что собственно я и сделаю ))

  • @senianga1
    @senianga1 ปีที่แล้ว

    Очень полезно и не сложно в в исполнении, но если добавить ещё одну картинку..... всё рассыпится... , на CMS такое уже не натянешь, ну или с большими ограничениями. Для простого десктопного сайта , или лендинга, самое то! Лайкос в общем!

  • @igoryavorskiy5297
    @igoryavorskiy5297 2 ปีที่แล้ว

    Очень понятно спасибо)

  • @andrewgrimes9284
    @andrewgrimes9284 4 ปีที่แล้ว

    Благодарю за понятный урок :)

  • @ИсмаилГаибов-у3ь
    @ИсмаилГаибов-у3ь 2 ปีที่แล้ว

    Имба! Спасибо за и информацию

  • @happyhomo4423
    @happyhomo4423 3 ปีที่แล้ว

    как всегда лучшая подача материала, очень было бы интересно посмотреть как делать окна которые можно скрыть и развернуть при нажатии кнопки

  • @MaximPistun
    @MaximPistun 2 ปีที่แล้ว

    Добрый день. Подскажите пожалуйста, а как два их запустить на одной странице? Названия классов менял, но не получается(

  • @alltheworldsastage.11688
    @alltheworldsastage.11688 3 ปีที่แล้ว

    Пожалуйста, указывайте ссылку где вы берёте фото для видео.

  • @ArabicLang.online
    @ArabicLang.online 3 ปีที่แล้ว

    Александр, спасибо за классные уроки по слайдерам! Но есть вопрос, как сделать автовоспроизведение? Пробую через setInterval и clearInterval, при загрузке страницы проигрывается, но если руками переключить, то перестает проигрываться. Если не использовать clearInterval, сбивается время (сбой или наложение интервалов)... В общем, голову ломаю.

  • @joshuakelly6045
    @joshuakelly6045 ปีที่แล้ว

    Блестящщее!!!

  • @Alex-bo9wt
    @Alex-bo9wt 2 ปีที่แล้ว

    От души, спасибо!!)))

  • @mikewazowski7526
    @mikewazowski7526 3 ปีที่แล้ว

    Очень полезно, спасибо!

  • @nodirayakubova6395
    @nodirayakubova6395 4 ปีที่แล้ว +1

    Ура,класс 👍👍👍👍

  • @АндрейБелов-ц8ы
    @АндрейБелов-ц8ы 2 ปีที่แล้ว

    а почему если дублировать слайдер на странице то дубль не работает? просто мне надо их несколько на странице

  • @ValeriyLarin
    @ValeriyLarin 4 ปีที่แล้ว

    Вот она магия!) спасибо

  • @АндрейАндреев-й5э2ы
    @АндрейАндреев-й5э2ы 3 ปีที่แล้ว

    Приветствую. Помогите пожалуйста разобраться. Верстая сайт возникла проблема. Есть ссылки на другие страницы сайта и есть слайдер на сайте. При нормальнй работе слайдера или вообще работе всех скриптов с добавлением js перестают работать ссылки на другие страницы сайта, при комментировании скрипта с js перестает работать всё что связано с js, но начинают работать ссылки. Надеюсь понятно объяснил)) Прошу помощи в этом вопросе.

  • @cryptoinfinity42
    @cryptoinfinity42 2 ปีที่แล้ว

    Большое спасибо!

  • @igormajrov8444
    @igormajrov8444 2 ปีที่แล้ว

    Вау. Простое решение. Вопросик встречный есть. Видел похожие слайдеры с бесконечной лентой: за последним кадром шел первый и т.д. Как этого добиться?

  • @ThisIsBurchTV
    @ThisIsBurchTV 4 ปีที่แล้ว +2

    супер, а как сделать, что бы каждый раз на клик 'next' первый слайд перебегал в конец массивая, типо бесконечый слайдер

    • @itgid
      @itgid  4 ปีที่แล้ว +4

      а это сделаем в следующем видео!

  • @askat25
    @askat25 4 ปีที่แล้ว +1

    Спасибо! Класс!👍👍👍👍

  • @macarov777
    @macarov777 2 ปีที่แล้ว

    Вы прекрасны

  • @geroin6294
    @geroin6294 2 ปีที่แล้ว

    Прикольно. Получилось)

  • @alltheworldsastage.11688
    @alltheworldsastage.11688 3 ปีที่แล้ว

    Спасибо, супер видео. У меня все получилось. Подскажите у Вас есть видео где вы подробно рассказываете про все css?

  • @doflamingo1826
    @doflamingo1826 2 ปีที่แล้ว

    Вроде можно было бы сделать один метод внутри которого проверять какая именно кнопка нажата и считать на ее основе уже offset

  • @PierreDunnio
    @PierreDunnio 3 ปีที่แล้ว +1

    Есть одна проблема. Нужно как-то залочить слайдер т.к. если нажимать часто на кнопки переключения оффсет меняется быстрее, чем переключается слайдер. То есть есть разница во времени между транзишном и сменой оффсета.

    • @lokusok5080
      @lokusok5080 2 ปีที่แล้ว

      Тут помогут события transitionstart и transitionend (prev, next - функции меняющие left у sliderLine):
      nextBtn.addEventListener("click", next);
      prevBtn.addEventListener("click", prev);
      sliderLine.addEventListener("transitionstart", () => {
      nextBtn.removeEventListener("click", next);
      prevBtn.removeEventListener("click", prev);
      });
      sliderLine.addEventListener("transitionend", () => {
      nextBtn.addEventListener("click", next);
      prevBtn.addEventListener("click", prev);
      });

  • @QOMITET
    @QOMITET 3 ปีที่แล้ว

    Бля как же просто вы объясняете…респект

  • @РостиславГоман
    @РостиславГоман 2 ปีที่แล้ว

    спасибо за видео

  • @denys6168
    @denys6168 3 ปีที่แล้ว

    ну вот то что надо же! спасибо

  • @НатальяФилипенко-й7ш
    @НатальяФилипенко-й7ш 3 ปีที่แล้ว

    Спасибо))) Очень понятно)))