Слайдер на чистом CSS без JavaScript

Поделиться
HTML-код
  • Опубликовано: 1 фев 2025

Комментарии • 73

  • @golikroma
    @golikroma Год назад +4

    Нравится, что вы помимо теории ещё и всё демонстрируете на деле, то есть на практике! Так проще понять.

  • @romast07
    @romast07 Год назад +3

    Невероятно крутой способ создания слайдера без JavaScript. Просто мастер-класс.

  • @JRs_Owners
    @JRs_Owners Год назад +1

    С вами почти любой урок простой, подробно всё объясняете, кратко. Благодарю

  • @takyehossain2359
    @takyehossain2359 Год назад +1

    это действительно полезный информационный видеоконтент, мне очень нравится это видео

  • @konstsntin14
    @konstsntin14 Год назад +1

    Спасибо за подробное объяснение каждого шага. Теперь могу сделать свой слайдер без проблем.

  • @farmlingarchontas2216
    @farmlingarchontas2216 Год назад +1

    Объяснения занимают время. Хотя ничего слишком сложного нет. Большое спасибо. Лайк!

  • @user-olena_shatun
    @user-olena_shatun Год назад +2

    Анна, спасибо большое за то что делитесь своим опытом и знаниями

  • @kucoleg11
    @kucoleg11 Год назад

    Замечательный способ создания слайдера без использования JavaScript. Великолепный урок.

  • @Svet__alya
    @Svet__alya Год назад +1

    Вы отличный специалист! Учусь смотря на то как вы делаете и сама набираюсь опыта😊

  • @ЮрийАтамас
    @ЮрийАтамас Год назад

    Качественный обзор, сразу видно настоящий профессионал своего дела

  • @АнютаКостенко-я2я

    Спасибо за такой подробный урок, с вами заниматься легко и удобно, всё объясняете в доступной форме и даёте дельные советы.

  • @ГалинаУгрюмова-ь9ъ

    Понятный, грамотный урок специалиста. Спасибо.

  • @lemontea330
    @lemontea330 10 месяцев назад

    ОБАЛДЕТЬ какая красота. это шикарно, я в шоке )))))

  • @sashabest1479
    @sashabest1479 Год назад +1

    Довольно дельные советы и неплохая методика, нужно будет протестировать такой способ, думаю все должно получиться.

  • @blekhnik49
    @blekhnik49 Год назад

    Спасибо за уделенное внимание деталям. Теперь у меня есть крутой слайдер без JavaScript.

  • @anamulanam5866
    @anamulanam5866 Год назад

    Видео очень классное, хочу больше таких видео. И это видео должен посмотреть каждый

  • @ІлляДорош-л6ш
    @ІлляДорош-л6ш Год назад

    Огромная благодарность автору за подбор материала.

  • @Svetlana7777ok
    @Svetlana7777ok Год назад

    спасибо, что раскрываете нам такие сложные технические моменты

  • @ВладимирМолчанов-ш5н

    Спасибо, что делитесь такими уроками

  • @sergeymickolaenko1161
    @sergeymickolaenko1161 Год назад

    Очень полезное видео, как раз то что искал👍💯

  • @beautifulnature8259
    @beautifulnature8259 Год назад

    Отличный понятный доходчивый урок. Тема востребованная. Многим будет интересно

  • @mark19944
    @mark19944 Год назад +1

    Всегда интересно узнать о очередных новинках и быть в курсе событий

  • @ivanovna9434
    @ivanovna9434 Год назад +1

    Очень полезный навык для работы фрилансера спасибо за объяснение

  • @РоманКоптев-л3ж
    @РоманКоптев-л3ж 10 месяцев назад

    шикарное обьяснение , все просто и классно , спасибо

  • @tetyana5295
    @tetyana5295 Год назад

    спасибо за ваши объяснения сложных технических моментов

  • @dembelsky
    @dembelsky Год назад

    А вот работа с анимацией мне показалась весьма интересной!

  • @HaidukLiliia1724
    @HaidukLiliia1724 Год назад

    Ты такая приятная девушка, с тобой любое занятие становится легким - ты разъясняешь все детально, но при этом кратко и информативно. Слайдеры на CSS обладают определенными преимуществами перед слайдерами на Javascript. Одно из них - это скорость загрузки.

  • @dimlivelong
    @dimlivelong Год назад

    Не знаю как слайдеры, но видосики девченка создавать отлично умеет, и тема, и картинка кликбейт, и ваще 😊 иногда что-то новенькое даже узнать можно СПАСИБО ❤

  • @CityGorsk
    @CityGorsk Год назад +3

    Вы очень приятная девушка, с вами любой урок становится простым, вы подробно, но в то же время кратко и информативно объясняете.

  • @ОльгаШ-т6ц
    @ОльгаШ-т6ц Год назад

    Очень полезное, информативное видео.

  • @СаняБонд-г7я
    @СаняБонд-г7я Год назад

    Очень интересное и полезное видео. Хорошо объяснила мне понравилось вы молодец

  • @andreylagno2372
    @andreylagno2372 Год назад

    такой контент вижу впервые в ютубе в ролике

  • @LostInspector
    @LostInspector Год назад

    Спасибо за урок. Очень помогли, не хотелось подключать сторонние плагины.

  • @pavel7930
    @pavel7930 Год назад +1

    Крутяк!

  • @StarkRealityy
    @StarkRealityy Год назад +1

    Посмотрел видео, сам учу фронт недавно и пропала мотивация как то))
    Ниху@ не понятно, но очень интересно!
    Ана вы прекрасны, как вы с этими функциями так ловко, видно руку мастера!!

    • @annblok_webdev
      @annblok_webdev  Год назад

      Почему пропала мотивация?

    • @MrTAZAQ
      @MrTAZAQ Год назад

      Если Ты учишь "фронт", то тебе это никак не поможет, это из разряда троллейбуса из буханки хлема, сделать можно, но пользы мало

    • @StarkRealityy
      @StarkRealityy Год назад

      @@annblok_webdev не воспринимай в серьёз, просто я за 6 месяцев неторопливой учёбы думал что я почти гуру, а тут ты, со своим замечательным контентом, который каааак опустил меня на землю!
      Но я рациональный молодой человек и это была шутка!
      На самом деле твой контент мотивирует продолжать учиться и не сдаваться, что бы стать таким же крутым как ты ❤

    • @KlaudGortsev
      @KlaudGortsev Год назад

      ​@@MrTAZAQ А что тогда нужно учить?

    • @MaksimMaksim_1
      @MaksimMaksim_1 Год назад

      ​@@annblok_webdev а расширение в VS коде - LiveShare часто кто-то использует при совместной работе над проектом ?

  • @robereds245
    @robereds245 Год назад

    не просто новичку изучать язык уже понял на себе)

  • @Slavaver
    @Slavaver Год назад +1

    Видимо следующий шаг это использовать еще и Scroll-driven Animations )

  • @Алекс-ж5п8я
    @Алекс-ж5п8я Год назад

    Как же это все сложно на самом деле для меня. но очень понравилось и заинтересовало

  • @РоманНарожнов
    @РоманНарожнов Год назад

    Спасибо!

  • @kopchik1000
    @kopchik1000 Год назад

    Анна вот если честно то я понимаю лишь 10 часть того что вы говорите но все равно почему то слушаю)))

  • @maxsmirnov9501
    @maxsmirnov9501 Год назад

    А как можно стопнуть анимацию по какому нибудь пользовательскому событию, например вводу мыши?
    Вряд-ли будет достаточно убрать animation, всё скакнет к исходной точке.
    Но если доработать этот момент, то супер.

  • @alexCompany
    @alexCompany Год назад

    Прикольно, создай видео пожалуйста про новый GPTs

  • @15_oniks_49
    @15_oniks_49 Год назад +2

    Пиар менеджер функции clamp 😘❤️

    • @annblok_webdev
      @annblok_webdev  Год назад +1

      Амбассадорство вышло на новый уровень

  • @Js__voL_06
    @Js__voL_06 2 месяца назад

    Поэтому всегда пользовался и буду пользоваться bootstrap который является танком для верстки

  • @smotritelyoutube
    @smotritelyoutube Год назад +1

    Ну для общего развития сойдет. Ну а на сколько это практично и кто будет этим пользоваться для слайдеров, думаю ни кто)

    • @annblok_webdev
      @annblok_webdev  Год назад +1

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

  • @II-hs9qm
    @II-hs9qm Год назад

    Well, for general development, it'll do. But how practical it is and who will use it for sliders, I think no one).

  • @Alex_Presli
    @Alex_Presli Год назад

    Так если блоки имеют значение 500 пикселей, это как раз таки означает то, что VW зависит от ширины экрана. Верно.

  • @yurok1991
    @yurok1991 Год назад +1

    сохраню себе, уже есть идеи, где это применить

  • @md.sazzad
    @md.sazzad Год назад

    nice vedio 🙂

  • @Atractiondj
    @Atractiondj Год назад +1

    Это не вертикальный слайдер, а вертикальная анимация карточек... где функционал переключения слайдов по нажатию? Где остановка прокрутки при наведении? Где прогресс бар для слайдов?

    • @fantomchik1183
      @fantomchik1183 Год назад

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

    • @Atractiondj
      @Atractiondj Год назад +1

      @@fantomchik1183 человек не ошибся а не сделал то о чем говорила, сделать то о чем я говорил на чистом CSS можно! Душно тебе стало открой форточку

  • @AniMag59
    @AniMag59 9 месяцев назад

    Интересный пример и реализация. Однако явно для слайдера такое использовать нельзя. Как минимум для слайдера с контентом особенно кликабельным. Как визуальное украшение это отличное решение

  • @саша-ю1в9ь
    @саша-ю1в9ь Год назад

    У меня вопрос. Зачем все это? Простой js и все. Ничего проще же нет

  • @ВераАлександрова-й6ц

    Недостаточно знать только HTML и CSS,чтобы создать сайт,он получится статичным.

  • @podlblj
    @podlblj Год назад

    Вот и стоило оно того?)) JS-ом вообще не проблема же

  • @cooperanderson8651
    @cooperanderson8651 Год назад

    Слайдер на чистом css - это же ненужно будет подключать сторонние дополнения. Я считаю, что это прогресс. Теперь одним дополнением будет в проекте меньше.

  • @ЛидияМажуга-б3я
    @ЛидияМажуга-б3я Год назад

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

  • @Marinellamaksimova
    @Marinellamaksimova Год назад

    Если хотите обойтись без JavaScript,то можете использовать эту карусель...

  • @clleoweb4083
    @clleoweb4083 Год назад

    О чем урок, о том как иконку поставить? Или как ссылки стилизовать ... Ты ЗАНУДА...!

  • @personaljesus4348
    @personaljesus4348 Год назад

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

  • @ДаниярБулдаков
    @ДаниярБулдаков Год назад

    Лучше JS. Не надо себя так мучать. Это же потом другому разработчику 100% переписывать

  • @РоманНарожнов
    @РоманНарожнов Год назад

    Спа

  • @fadeev805
    @fadeev805 Год назад

    🔥🔥🔥