Короче у кого с мобильных устройств в таких браузерах как Chrome, Edge и т. д., при событии 'pointermove' слайд еле ползет и не перелистывается. Для класса gallery-line нужно добавить css свойство touch-action: none;
Обалденная подача, такой слайдер можно сказать для продвинутых) Радует, что вы публикуете такой контент бесплатно, попробовала написать аналогичный слайдер по вашему примеру, только на typescript. Получилось круто, спасибо) теперь горизонт возможностей для создания слайдеров расширился)
Честно - я в шоке)) конечно хотелось бы поподробнее объяснять классы, конструкторы, методы и свойства. Очень легко запутаться что куда писать и почему (( Но это сама тема не легкая, поэтому цель оправдывает скорость) или сделайте пожалуйста отдельное видео по вызовах функций через new и контексты. Большое спасибо за такие уроки!
Вау какой классный комментарий. Спасибо и вам за просмотр. Про более подробные объяснения, здесь я старалась максимально объяснить, но если такие темы не понятны, лучше отдельно почитать, т.к. иначе ролик расширится очень, здесь лучше отдельный ролик. Я рекомендую учебник learn.javascript.ru, там про классы очень круто рассказано (learn.javascript.ru/es-class). ❤️
@@dobrMAV Для изучения JS достаточно какого-нибудь редактора, например Visual Studio Code и какого-нибудь браузера для запуска кода. В качестве вывода использовать консоль браузера, как я делала в текущем уроке. NodeJS необходим если вы будете в дальнейшем изучать серверную часть и использовать js на сервере + писать какие-нибудь тулзы.
Доброго времени суток, спасибо за Ваш труд! Возможно вы пробовали, но на случай если нет, попробуйте swiperjs, слайдер на чистом js с очень хорошим функционалом, если верить документации то достаточно легко подключается в реакт и некоторые другие библиотеки(фреймворки)
Спасибо за просмотр! 🙃 Про swipejs, я кстати когда готовила видео, видела на TH-cam есть видео как раз с этой библиотекой, ещё её не пробовала. Спасибо за рекомендацию! Обязательно посмотрю ❤️
А вы до всех этих приемов, и в частности с транслейтом при перетаскивании, сами додумались или видели раньше подобные приемы? Просто меня часто мучает совесть за то что не я сам дошел до этого а просто где то увидел и пользуюсь только(
привет) когда я например двигаю слайд вправо (больше чем на 20px), а потом, не отпуская курсор, влево уже к примеру на 100, тогда карусель двигается вправо, а не влево. Может это я неправильно что-то переписал, а так видео очень понравилось, спасибо)
Возможно для новичков будет сложно. Но если задача есть создать галерею и в целом язык JS понятен, то думаю доступно. Какие-то свойства погуглить, позадавать вопросы :)
Хороший показ. Качественный код. Но это не урок. Это для тех, кто уже пишет и читает код, как надо работать. И демонстрация личных возможностей и какого-то уровня
Привет, Андрей! Конкретно здесь всё на чистых технологиях HTML, CSS, JS. Без сборщиков, вообще без всего. Подключение файлов скрипта и стилей происходит в index.html. И в итоге запускается index.html в браузере.
Здравствуйте, Евгений! Хороший вопрос. В текущем случае я создавала некоторую библиотеку, которую можно было бы использовать быстро на разных проектах. Одно из самых классных качеств библиотек, на мой взгляд - это удобство, а именно сделать меньше телодвижений, чтобы всё заработало. HTML в данном случае прост - список div с основной информацией. Всё остальное: иконки и ссылки на них, доп. стили, доп html добавляется при подключении библиотеки. Т.е. вам достаточно будет чтобы использовать эту либу на другом проекте, просто взять скопировать её (а именно собранные в одной папке файлы), подключить javascript, стили из нее, создать простой html и все заработает. Иначе если бы у вас была такая галерея на реальном проекте, вы писали бы все сразу в html и в css (так можно), и вам нужно добавить эту либку на другой проект, пришлось бы всё выпиливать. Либо даже на одном проекте несколько раз использовать, опять копировать весь html, проверять что стили заработали верно и т.д. В общем объединять логику там где это возможно, упрощать вход в эту логику, просто сохраняет вам нервы при масштабировании :)
Елена подскажите еще вот какой момент.. вы название css классов вынесли за пределы класса галереи почему не передали их в конструктор в options ? почему они снаружи класса?
@@ЕвгенийКузнецов-щ1ю Так можно делать и собственно если далее расширять библиотеку, то можно подумать как прокидывать собственные стили, например, как вы сказали добавлять названия классов в options, но при этом было бы здорово иметь дефолтные стили в любом случае, чтобы там всё не развалилось :). Я рассматриваю эту штуку как дополнительную фичу, которую в текущем варианте не предусматривала.
А зачем мы в dragging() в условии пишем dragShift > 20 && dragShift > 0 - ведь если dragShift больше 20, то он и так больше 0, зачем это доп условие? И в обратном случае dragShift < -20 && dragShift < 0 - то же самое.
Здравствуйте. Скажите, каким образом currentSlide = 0, потом в дальнейшем понимает и принимает 1,2,3... Нигде же в функциях изменение не прописано. Оно-то работает и все связанные величины изменяются, но каким образом currentSlide принимает другие значения?
Изменения происходят в методе dragging: github.com/liveldi/swipe-gallery/blob/main/gallery-lib/gallery.js#L159 github.com/liveldi/swipe-gallery/blob/main/gallery-lib/gallery.js#L169 В следующем уроке изменения также будут устанавливать в методах clickDots, moveToLeft, moveToRight
@@АндрейАнтонович-й9н Я использую этот объект для того, чтобы взять координату мыши из события относительно страницы: pageX. Вообще при использовании событий элементе можно вытаскивать разные полезные штуки, можете подробнее почитать здесь про него learn.javascript.ru/introduction-browser-events#obekt-sobytiya
В данном случае если создавать какую-то библиотечку, то использование классов - это наиболее удобный, как мне кажется, способ. Либо я бы делала на более старых подходах, через прототипы. Здесь по факту только один класс используется без наследований... Попробуйте ознакомиться с документацией по классам learn.javascript.ru/es-class, там действительно ничего сложного. В любом случае понимаю, что может быть не просто понять, т.к. в целом даже по коду не мало получилось.
@@webelart Если с классами проблема, я думаю человек с прототипами вообще закапается. Классы в JS по сути синтаксический сахар для удобства. Как раз в видео идеально все для начального понимания ООП. Сложного ничего нет, нет ни приватных свойств, ни наследований, где действительно начинающие плывут.
@@EZHEVNKA В текущем примере я писала реализацию библиотеки галереи. В целом это уже не самая простая тема. Для новичков понятно будет не просто. Почему через JS? Всё просто. Если это библиотека, то хорошо бы придерживаться некоторых правил: 1. Оставлять HTML как можно чище, и все остальные стили классы, должны инициализоваться, когда подключаешь либу. 2. Классно иметь чёткие правила подключения и затем уже запуск. Например, вот есть чайник, вы хотите чай. Вам нужно туда залить воду и нажать кнопку, всё интерфейс прост, и совершенно не хочется разбирать в том как там внутри ваш чайник работает. Простые правила работы, а всё остальное делает либа.😉
Спасибо за действительно шокирующие способности от прекрасной половины человечества) И один вопрос на засыпку. Секрет в простоте подключения либы понятен. Но при загрузке html, браузер строит и рисует layout. А метод innerHTML в функции manageHTML(), насколько понимаю, "не бесплатно" вставляет свои обертки, этот метод берет и полностью перезаписывает ноду, по крайней мере так пишется в учебнике. В таком случае, разве мы "не платим" за перерендер при заходе на страницу? А если галерей несколько... ?
@@webelart привет, галерея супер ) вот только проблемка, когда пытаешься скроллить страницу с галереей, страница не скролится) как пофиксить это? галерея листается вправо и влево, но страница нет) допустим ваша галерея находится между 2мя дивами на сайте) дивы скролятся, но когда доходим до самой галереи, то не вариант больше скроллить .. На мобильных устройствах)
Uncaught ReferenceError: wrapElementByDiv is not defined at gallery.js:25:13 at Array.map () at Gallery.manageHTML (gallery.js:24:62) at new Gallery (gallery.js:11:14) at index.js:1:1 Не получаеться,уже все перепроверил(( Подскажите пожалуйста как исправить это?(
Доброго дня, Елена. Я присоединяюсь к вопросу @ant3413. И хотел бы уточнить следующий момент (10:14 минута в видео) Вы распечатываете this.slideNodes и получаете список слайдов. Однако, если я его распечатываю, то получаю массив пустых элементов Array(4) [ undefined, undefined, undefined, undefined ]. Я делал у себя для дополнительной проверки короткий скрипт и получил тот же результат
Свайпер не сам себя родил, правильно? Кто-то же его написал. Многим интересно как работает слайдер и как его написать с нуля. Со времен похорон jQuery хороших готовых слайдеров не так уж и много осталось. Если задача реализовать максимально простой слайдер на странице, то я скорее всего выберу именно вариант из видео. Зачем тянуть здоровенную библиотеку, если большая часть функционала мне вообще не нужна? А тут цена вопроса парочка небольших js файлов и стили.
![เจ็บที่ยังฮัก - ม่อน วรวิทย์ [ Official Mv ] จอนนี่มิวสิค](http://i.ytimg.com/vi/KALIGSRSjFs/mqdefault.jpg)
Чётко быстро грамотно .. супер топовый урок ..на просторах интернета нет такого
Господи, серьёзно? Неужели есть такие топовые уроки с качественным кодом.. Вы лучшая, спасибо!
Спасибо большое за такой приятный комментарий! 😍😍😍 Рада, что понравилось видео! ❤️
Короче у кого с мобильных устройств в таких браузерах как Chrome, Edge и т. д., при событии 'pointermove' слайд еле ползет и не перелистывается. Для класса gallery-line нужно добавить css свойство touch-action: none;
Спасибо за дополнение, я закреплю ваш комментарий, чтобы если кто-то столкнётся увидел. ❤️Я так понимаю это под системой windows.
@@webelart Не за что, на андроиде в этих браузерах такая же проблема.
Чел, ты меня спас просто) Мучаюсь 2 дня)
СПАСИБО!
Обалденная подача, такой слайдер можно сказать для продвинутых) Радует, что вы публикуете такой контент бесплатно, попробовала написать аналогичный слайдер по вашему примеру, только на typescript. Получилось круто, спасибо) теперь горизонт возможностей для создания слайдеров расширился)
Большое спасибо за видео! Для новичка сложновато, но гораздо полезнее чем многие видео про слайдера👍
Самоё крутое видео по теме в сети! Очень помогло, спасибо!!! Подача материала, глубина темы, это высший пилотаж!!!
Лена, СПАСИБО Вам большое!
Пожалуйста ❤
Спасибо, Круто! Для начинающих явно надо поподробнее, а в остальном ок.
❤️
Честно - я в шоке)) конечно хотелось бы поподробнее объяснять классы, конструкторы, методы и свойства. Очень легко запутаться что куда писать и почему (( Но это сама тема не легкая, поэтому цель оправдывает скорость) или сделайте пожалуйста отдельное видео по вызовах функций через new и контексты. Большое спасибо за такие уроки!
Вау какой классный комментарий. Спасибо и вам за просмотр. Про более подробные объяснения, здесь я старалась максимально объяснить, но если такие темы не понятны, лучше отдельно почитать, т.к. иначе ролик расширится очень, здесь лучше отдельный ролик. Я рекомендую учебник learn.javascript.ru, там про классы очень круто рассказано (learn.javascript.ru/es-class). ❤️
как же хочется иметь такой уровень как у Вас! Спасибо огромное за видео! Вы очень крутая!
Спасибо большое! Уровень достигается постепенно, с постоянной практикой. ❤️
вот это да, спасибо за урок! Качественный контент. js drag, swipe, touch, slider, carousel, gallery, javascript
Елена, Вы такая умница, такие крутые уроки! Желаю успехов в развитии канала, потому что контент топовый!
Очень здорово, спасибо вам, 👍 ещё хотелось бы во второй части добавить переключение по клику на стрелки
Виктор Кашин Спасибо за фидбек! Про стрелочки учту 👍
Добавила вторую часть и также стрелочки в ней, финальное отображение со стрелочками делается на 15:40 минуте th-cam.com/video/oaunsSKJ920/w-d-xo.html
Спасибо за полезное видео! Пытаюсь выучить и понять JS, ох пока не просто)
Рада, что понравился урок! ❤️ С JS всё получится, главное практика и не останавливаться в обучении 😉
@@webelart Спасибо!Надеюсь с практикой придет лучшее понимание.
@@webelart Подскажите пожалуйста,когда учишь JS ,надо скачать на комп Node.js ?
@@dobrMAV Для изучения JS достаточно какого-нибудь редактора, например Visual Studio Code и какого-нибудь браузера для запуска кода. В качестве вывода использовать консоль браузера, как я делала в текущем уроке.
NodeJS необходим если вы будете в дальнейшем изучать серверную часть и использовать js на сервере + писать какие-нибудь тулзы.
@@webelart Понял,спасибо!
Вау! Спасибо, что поделились своими знаниями❤ лайк, подписка!
Доброго времени суток, спасибо за Ваш труд! Возможно вы пробовали, но на случай если нет, попробуйте swiperjs, слайдер на чистом js с очень хорошим функционалом, если верить документации то достаточно легко подключается в реакт и некоторые другие библиотеки(фреймворки)
Спасибо за просмотр! 🙃 Про swipejs, я кстати когда готовила видео, видела на TH-cam есть видео как раз с этой библиотекой, ещё её не пробовала. Спасибо за рекомендацию! Обязательно посмотрю ❤️
А вы до всех этих приемов, и в частности с транслейтом при перетаскивании, сами додумались или видели раньше подобные приемы? Просто меня часто мучает совесть за то что не я сам дошел до этого а просто где то увидел и пользуюсь только(
Это абсолютно нормально) если попасть на работу разработчиком, такого станет ещё больше.
Елена Здравствуйте,откуда берутся childNode и children.
привет)
когда я например двигаю слайд вправо (больше чем на 20px), а потом, не отпуская курсор, влево уже к примеру на 100, тогда карусель двигается вправо, а не влево.
Может это я неправильно что-то переписал, а так видео очень понравилось, спасибо)
Урок далеко не для новичков, но полезный. Спасибо)
Возможно для новичков будет сложно. Но если задача есть создать галерею и в целом язык JS понятен, то думаю доступно. Какие-то свойства погуглить, позадавать вопросы :)
почему слетает контекст при вызове метода в событие?
Хороший показ. Качественный код. Но это не урок. Это для тех, кто уже пишет и читает код, как надо работать. И демонстрация личных возможностей и какого-то уровня
вопрос! а как вы делали такие расчеты? это же вообще капец
Привет. Подскажи, как происходит импорт и экспорт файлов в JS? У тебя установлен gulp или может webpack?
Привет, Андрей! Конкретно здесь всё на чистых технологиях HTML, CSS, JS. Без сборщиков, вообще без всего. Подключение файлов скрипта и стилей происходит в index.html. И в итоге запускается index.html в браузере.
почему поинтердаун мы вешаем на лайнНод, а поинтерАп на виндоу?
Можете написать в английской итерации.
Елена подскажите, вы доработали первоначальную верстку в джава скрипте, почему это не делается сразу в хтмл файле?
Здравствуйте, Евгений! Хороший вопрос. В текущем случае я создавала некоторую библиотеку, которую можно было бы использовать быстро на разных проектах. Одно из самых классных качеств библиотек, на мой взгляд - это удобство, а именно сделать меньше телодвижений, чтобы всё заработало.
HTML в данном случае прост - список div с основной информацией. Всё остальное: иконки и ссылки на них, доп. стили, доп html добавляется при подключении библиотеки. Т.е. вам достаточно будет чтобы использовать эту либу на другом проекте, просто взять скопировать её (а именно собранные в одной папке файлы), подключить javascript, стили из нее, создать простой html и все заработает.
Иначе если бы у вас была такая галерея на реальном проекте, вы писали бы все сразу в html и в css (так можно), и вам нужно добавить эту либку на другой проект, пришлось бы всё выпиливать.
Либо даже на одном проекте несколько раз использовать, опять копировать весь html, проверять что стили заработали верно и т.д.
В общем объединять логику там где это возможно, упрощать вход в эту логику, просто сохраняет вам нервы при масштабировании :)
Елена подскажите еще вот какой момент.. вы название css классов вынесли за пределы класса галереи почему не передали их в конструктор в options ? почему они снаружи класса?
@@ЕвгенийКузнецов-щ1ю Так можно делать и собственно если далее расширять библиотеку, то можно подумать как прокидывать собственные стили, например, как вы сказали добавлять названия классов в options, но при этом было бы здорово иметь дефолтные стили в любом случае, чтобы там всё не развалилось :). Я рассматриваю эту штуку как дополнительную фичу, которую в текущем варианте не предусматривала.
крутой слайдер
А зачем мы в dragging() в условии пишем dragShift > 20 && dragShift > 0 - ведь если dragShift больше 20, то он и так больше 0, зачем это доп условие? И в обратном случае dragShift < -20 && dragShift < 0 - то же самое.
Да, что-то тут переборщила с условиями. Вы правы. ❤️
Здравствуйте. Скажите, каким образом currentSlide = 0, потом в дальнейшем понимает и принимает 1,2,3... Нигде же в функциях изменение не прописано. Оно-то работает и все связанные величины изменяются, но каким образом currentSlide принимает другие значения?
Изменения происходят в методе dragging:
github.com/liveldi/swipe-gallery/blob/main/gallery-lib/gallery.js#L159
github.com/liveldi/swipe-gallery/blob/main/gallery-lib/gallery.js#L169
В следующем уроке изменения также будут устанавливать в методах clickDots, moveToLeft, moveToRight
@@webelart спасибо, понял
@@webelartЗачем добавлять в скобки startDrag() и dragging() - evt, что этот аргумент передает и зачем он?
@@АндрейАнтонович-й9н Я использую этот объект для того, чтобы взять координату мыши из события относительно страницы: pageX. Вообще при использовании событий элементе можно вытаскивать разные полезные штуки, можете подробнее почитать здесь про него learn.javascript.ru/introduction-browser-events#obekt-sobytiya
@@webelart Спасибо
Здравствуйте , очень сложно да и все на ООП((( тяжело понять начинающим .
А Вы можете без ООП сделать такой урок)
В данном случае если создавать какую-то библиотечку, то использование классов - это наиболее удобный, как мне кажется, способ. Либо я бы делала на более старых подходах, через прототипы. Здесь по факту только один класс используется без наследований... Попробуйте ознакомиться с документацией по классам learn.javascript.ru/es-class, там действительно ничего сложного.
В любом случае понимаю, что может быть не просто понять, т.к. в целом даже по коду не мало получилось.
@@webelart Если с классами проблема, я думаю человек с прототипами вообще закапается. Классы в JS по сути синтаксический сахар для удобства. Как раз в видео идеально все для начального понимания ООП. Сложного ничего нет, нет ни приватных свойств, ни наследований, где действительно начинающие плывут.
а зачем создавать в js то что можно изначально создать в html? в чем секрет
Что вы имеете ввиду, поясните?
@@webelart ну классы присваиваются js, неудобно позиционировать если ты новичок) или так просто нужно чтобы что-то работало так как нужно?))
@@EZHEVNKA В текущем примере я писала реализацию библиотеки галереи. В целом это уже не самая простая тема. Для новичков понятно будет не просто.
Почему через JS? Всё просто. Если это библиотека, то хорошо бы придерживаться некоторых правил:
1. Оставлять HTML как можно чище, и все остальные стили классы, должны инициализоваться, когда подключаешь либу.
2. Классно иметь чёткие правила подключения и затем уже запуск. Например, вот есть чайник, вы хотите чай. Вам нужно туда залить воду и нажать кнопку, всё интерфейс прост, и совершенно не хочется разбирать в том как там внутри ваш чайник работает.
Простые правила работы, а всё остальное делает либа.😉
@@webelart ясно, спасибо!) а слайдеров у вас нет подобных?)
Спасибо за действительно шокирующие способности от прекрасной половины человечества) И один вопрос на засыпку. Секрет в простоте подключения либы понятен. Но при загрузке html, браузер строит и рисует layout. А метод innerHTML в функции manageHTML(), насколько понимаю, "не бесплатно" вставляет свои обертки, этот метод берет и полностью перезаписывает ноду, по крайней мере так пишется в учебнике. В таком случае, разве мы "не платим" за перерендер при заходе на страницу? А если галерей несколько... ?
Я смотрел и удивлялся тому как ДЕВУШКА может шарить в программировании. Браво! Это очень круто!
Эта ДЕВУШКА ещё не только программировать, но и в ИЗБУ и КОНЯ. Подписывайся на канал и не пропускаем видосики.
@@webelart 👍
@@webelart 😄😁😀
@@webelart привет, галерея супер ) вот только проблемка, когда пытаешься скроллить страницу с галереей, страница не скролится) как пофиксить это? галерея листается вправо и влево, но страница нет) допустим ваша галерея находится между 2мя дивами на сайте) дивы скролятся, но когда доходим до самой галереи, то не вариант больше скроллить .. На мобильных устройствах)
Спасбо. Очень полезно и интересно. Только одно маленькое оптимизаторское предложение:
setEvents() {
this.eventListeners = [
{name: 'resize', callback: debounce(this.resizeGallery)},
{name: 'pointerdown', callback: this.startDrag},
{name: 'pointerup', callback: this.stopDrag}
];
this.eventListeners.forEach(listener => window.addEventListener(listener.name, listener.callback));
}
destroyEvents() {
this.eventListeners.forEach(listener => window.removeEventListener(listener.name, listener.callback));
}
Uncaught ReferenceError: wrapElementByDiv is not defined
at gallery.js:25:13
at Array.map ()
at Gallery.manageHTML (gallery.js:24:62)
at new Gallery (gallery.js:11:14)
at index.js:1:1
Не получаеться,уже все перепроверил((
Подскажите пожалуйста как исправить это?(
Доброго дня, Елена. Я присоединяюсь к вопросу @ant3413. И хотел бы уточнить следующий момент (10:14 минута в видео) Вы распечатываете this.slideNodes и получаете список слайдов. Однако, если я его распечатываю, то получаю массив пустых элементов Array(4) [ undefined, undefined, undefined, undefined ]. Я делал у себя для дополнительной проверки короткий скрипт и получил тот же результат
const l = e => console.log(e);
let nodes = document.getElementsByTagName('div');
let nodesToArrys = Array.from(nodes).map(item => {
addClass(item);
});
l(nodesToArrys);
function addClass(elemet) {
elemet.classList.add('element');
return elemet;
}
Однако, если я добавляю return addClass(item), тогда все работает.
а зачем, если есть свайпер ?
Чтобы уметь самому делать.
Свайпер не сам себя родил, правильно? Кто-то же его написал. Многим интересно как работает слайдер и как его написать с нуля. Со времен похорон jQuery хороших готовых слайдеров не так уж и много осталось. Если задача реализовать максимально простой слайдер на странице, то я скорее всего выберу именно вариант из видео. Зачем тянуть здоровенную библиотеку, если большая часть функционала мне вообще не нужна? А тут цена вопроса парочка небольших js файлов и стили.