Чётко быстро грамотно .. супер топовый урок ..на просторах интернета нет такого

Господи, серьёзно? Неужели есть такие топовые уроки с качественным кодом.. Вы лучшая, спасибо!

@webelart

3 жыл бұрын

Спасибо большое за такой приятный комментарий! 😍😍😍 Рада, что понравилось видео! ❤️

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

Короче у кого с мобильных устройств в таких браузерах как Chrome, Edge и т. д., при событии 'pointermove' слайд еле ползет и не перелистывается. Для класса gallery-line нужно добавить css свойство touch-action: none;

@webelart

2 жыл бұрын

Спасибо за дополнение, я закреплю ваш комментарий, чтобы если кто-то столкнётся увидел. ❤️Я так понимаю это под системой windows.

@zizerlol

2 жыл бұрын

@@webelart Не за что, на андроиде в этих браузерах такая же проблема.

@undefined-channel

Жыл бұрын

Чел, ты меня спас просто) Мучаюсь 2 дня)

@igorognev8616

6 ай бұрын

СПАСИБО!

Обалденная подача, такой слайдер можно сказать для продвинутых) Радует, что вы публикуете такой контент бесплатно, попробовала написать аналогичный слайдер по вашему примеру, только на typescript. Получилось круто, спасибо) теперь горизонт возможностей для создания слайдеров расширился)

Большое спасибо за видео! Для новичка сложновато, но гораздо полезнее чем многие видео про слайдера👍

Лена, СПАСИБО Вам большое!

@webelart

8 ай бұрын

Пожалуйста ❤

Спасибо, Круто! Для начинающих явно надо поподробнее, а в остальном ок.

@webelart

2 жыл бұрын

❤️

Честно - я в шоке)) конечно хотелось бы поподробнее объяснять классы, конструкторы, методы и свойства. Очень легко запутаться что куда писать и почему (( Но это сама тема не легкая, поэтому цель оправдывает скорость) или сделайте пожалуйста отдельное видео по вызовах функций через new и контексты. Большое спасибо за такие уроки!

@webelart

2 жыл бұрын

Вау какой классный комментарий. Спасибо и вам за просмотр. Про более подробные объяснения, здесь я старалась максимально объяснить, но если такие темы не понятны, лучше отдельно почитать, т.к. иначе ролик расширится очень, здесь лучше отдельный ролик. Я рекомендую учебник learn.javascript.ru, там про классы очень круто рассказано (learn.javascript.ru/es-class). ❤️

Вау! Спасибо, что поделились своими знаниями❤ лайк, подписка!

как же хочется иметь такой уровень как у Вас! Спасибо огромное за видео! Вы очень крутая!

@webelart

2 жыл бұрын

Спасибо большое! Уровень достигается постепенно, с постоянной практикой. ❤️

Елена, Вы такая умница, такие крутые уроки! Желаю успехов в развитии канала, потому что контент топовый!

Спасибо за полезное видео! Пытаюсь выучить и понять JS, ох пока не просто)

@webelart

3 жыл бұрын

Рада, что понравился урок! ❤️ С JS всё получится, главное практика и не останавливаться в обучении 😉

@dobrMAV

3 жыл бұрын

@@webelart Спасибо!Надеюсь с практикой придет лучшее понимание.

@dobrMAV

3 жыл бұрын

@@webelart Подскажите пожалуйста,когда учишь JS ,надо скачать на комп Node.js ?

@webelart

3 жыл бұрын

@@dobrMAV Для изучения JS достаточно какого-нибудь редактора, например Visual Studio Code и какого-нибудь браузера для запуска кода. В качестве вывода использовать консоль браузера, как я делала в текущем уроке. NodeJS необходим если вы будете в дальнейшем изучать серверную часть и использовать js на сервере + писать какие-нибудь тулзы.

@dobrMAV

3 жыл бұрын

@@webelart Понял,спасибо!

вот это да, спасибо за урок! Качественный контент. js drag, swipe, touch, slider, carousel, gallery, javascript

Доброго времени суток, спасибо за Ваш труд! Возможно вы пробовали, но на случай если нет, попробуйте swiperjs, слайдер на чистом js с очень хорошим функционалом, если верить документации то достаточно легко подключается в реакт и некоторые другие библиотеки(фреймворки)

@webelart

3 жыл бұрын

Спасибо за просмотр! 🙃 Про swipejs, я кстати когда готовила видео, видела на KZread есть видео как раз с этой библиотекой, ещё её не пробовала. Спасибо за рекомендацию! Обязательно посмотрю ❤️

Очень здорово, спасибо вам, 👍 ещё хотелось бы во второй части добавить переключение по клику на стрелки

@webelart

3 жыл бұрын

Виктор Кашин Спасибо за фидбек! Про стрелочки учту 👍

@webelart

3 жыл бұрын

Добавила вторую часть и также стрелочки в ней, финальное отображение со стрелочками делается на 15:40 минуте kzread.info/dash/bejne/oZWp0NWMe62fYpM.html

Привет. Подскажи, как происходит импорт и экспорт файлов в JS? У тебя установлен gulp или может webpack?

@webelart

2 жыл бұрын

Привет, Андрей! Конкретно здесь всё на чистых технологиях HTML, CSS, JS. Без сборщиков, вообще без всего. Подключение файлов скрипта и стилей происходит в index.html. И в итоге запускается index.html в браузере.

вопрос! а как вы делали такие расчеты? это же вообще капец

Хороший показ. Качественный код. Но это не урок. Это для тех, кто уже пишет и читает код, как надо работать. И демонстрация личных возможностей и какого-то уровня

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

@webelart

2 жыл бұрын

Здравствуйте, Евгений! Хороший вопрос. В текущем случае я создавала некоторую библиотеку, которую можно было бы использовать быстро на разных проектах. Одно из самых классных качеств библиотек, на мой взгляд - это удобство, а именно сделать меньше телодвижений, чтобы всё заработало. HTML в данном случае прост - список div с основной информацией. Всё остальное: иконки и ссылки на них, доп. стили, доп html добавляется при подключении библиотеки. Т.е. вам достаточно будет чтобы использовать эту либу на другом проекте, просто взять скопировать её (а именно собранные в одной папке файлы), подключить javascript, стили из нее, создать простой html и все заработает. Иначе если бы у вас была такая галерея на реальном проекте, вы писали бы все сразу в html и в css (так можно), и вам нужно добавить эту либку на другой проект, пришлось бы всё выпиливать. Либо даже на одном проекте несколько раз использовать, опять копировать весь html, проверять что стили заработали верно и т.д. В общем объединять логику там где это возможно, упрощать вход в эту логику, просто сохраняет вам нервы при масштабировании :)

@user-ux7cj9rc2b

2 жыл бұрын

Елена подскажите еще вот какой момент.. вы название css классов вынесли за пределы класса галереи почему не передали их в конструктор в options ? почему они снаружи класса?

@webelart

2 жыл бұрын

@@user-ux7cj9rc2b Так можно делать и собственно если далее расширять библиотеку, то можно подумать как прокидывать собственные стили, например, как вы сказали добавлять названия классов в options, но при этом было бы здорово иметь дефолтные стили в любом случае, чтобы там всё не развалилось :). Я рассматриваю эту штуку как дополнительную фичу, которую в текущем варианте не предусматривала.

привет) когда я например двигаю слайд вправо (больше чем на 20px), а потом, не отпуская курсор, влево уже к примеру на 100, тогда карусель двигается вправо, а не влево. Может это я неправильно что-то переписал, а так видео очень понравилось, спасибо)

крутой слайдер

Здравствуйте. Скажите, каким образом currentSlide = 0, потом в дальнейшем понимает и принимает 1,2,3... Нигде же в функциях изменение не прописано. Оно-то работает и все связанные величины изменяются, но каким образом currentSlide принимает другие значения?

@webelart

3 жыл бұрын

Изменения происходят в методе 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

@user-bq6ig3lx1c

3 жыл бұрын

@@webelart спасибо, понял

@user-bq6ig3lx1c

3 жыл бұрын

@@webelartЗачем добавлять в скобки startDrag() и dragging() - evt, что этот аргумент передает и зачем он?

@webelart

3 жыл бұрын

@@user-bq6ig3lx1c Я использую этот объект для того, чтобы взять координату мыши из события относительно страницы: pageX. Вообще при использовании событий элементе можно вытаскивать разные полезные штуки, можете подробнее почитать здесь про него learn.javascript.ru/introduction-browser-events#obekt-sobytiya

@user-bq6ig3lx1c

3 жыл бұрын

@@webelart Спасибо

А вы до всех этих приемов, и в частности с транслейтом при перетаскивании, сами додумались или видели раньше подобные приемы? Просто меня часто мучает совесть за то что не я сам дошел до этого а просто где то увидел и пользуюсь только(

@user-ef2pn4zc8f

2 жыл бұрын

Это абсолютно нормально) если попасть на работу разработчиком, такого станет ещё больше.

Елена Здравствуйте,откуда берутся childNode и children.

А зачем мы в dragging() в условии пишем dragShift > 20 && dragShift > 0 - ведь если dragShift больше 20, то он и так больше 0, зачем это доп условие? И в обратном случае dragShift < -20 && dragShift < 0 - то же самое.

@webelart

2 жыл бұрын

Да, что-то тут переборщила с условиями. Вы правы. ❤️

Урок далеко не для новичков, но полезный. Спасибо)

@webelart

2 жыл бұрын

Возможно для новичков будет сложно. Но если задача есть создать галерею и в целом язык JS понятен, то думаю доступно. Какие-то свойства погуглить, позадавать вопросы :)

почему поинтердаун мы вешаем на лайнНод, а поинтерАп на виндоу?

@webelart

Жыл бұрын

Можете написать в английской итерации.

Здравствуйте , очень сложно да и все на ООП((( тяжело понять начинающим . А Вы можете без ООП сделать такой урок)

@webelart

3 жыл бұрын

В данном случае если создавать какую-то библиотечку, то использование классов - это наиболее удобный, как мне кажется, способ. Либо я бы делала на более старых подходах, через прототипы. Здесь по факту только один класс используется без наследований... Попробуйте ознакомиться с документацией по классам learn.javascript.ru/es-class, там действительно ничего сложного. В любом случае понимаю, что может быть не просто понять, т.к. в целом даже по коду не мало получилось.

@user-dv8co2zg9f

Жыл бұрын

@@webelart Если с классами проблема, я думаю человек с прототипами вообще закапается. Классы в JS по сути синтаксический сахар для удобства. Как раз в видео идеально все для начального понимания ООП. Сложного ничего нет, нет ни приватных свойств, ни наследований, где действительно начинающие плывут.

а зачем создавать в js то что можно изначально создать в html? в чем секрет

@webelart

2 жыл бұрын

Что вы имеете ввиду, поясните?

@EZHEVNKA

2 жыл бұрын

@@webelart ну классы присваиваются js, неудобно позиционировать если ты новичок) или так просто нужно чтобы что-то работало так как нужно?))

@webelart

2 жыл бұрын

@@EZHEVNKA В текущем примере я писала реализацию библиотеки галереи. В целом это уже не самая простая тема. Для новичков понятно будет не просто. Почему через JS? Всё просто. Если это библиотека, то хорошо бы придерживаться некоторых правил: 1. Оставлять HTML как можно чище, и все остальные стили классы, должны инициализоваться, когда подключаешь либу. 2. Классно иметь чёткие правила подключения и затем уже запуск. Например, вот есть чайник, вы хотите чай. Вам нужно туда залить воду и нажать кнопку, всё интерфейс прост, и совершенно не хочется разбирать в том как там внутри ваш чайник работает. Простые правила работы, а всё остальное делает либа.😉

@EZHEVNKA

2 жыл бұрын

@@webelart ясно, спасибо!) а слайдеров у вас нет подобных?)

@nic7708

10 ай бұрын

Спасибо за действительно шокирующие способности от прекрасной половины человечества) И один вопрос на засыпку. Секрет в простоте подключения либы понятен. Но при загрузке html, браузер строит и рисует layout. А метод innerHTML в функции manageHTML(), насколько понимаю, "не бесплатно" вставляет свои обертки, этот метод берет и полностью перезаписывает ноду, по крайней мере так пишется в учебнике. В таком случае, разве мы "не платим" за перерендер при заходе на страницу? А если галерей несколько... ?

Я смотрел и удивлялся тому как ДЕВУШКА может шарить в программировании. Браво! Это очень круто!

@webelart

2 жыл бұрын

Эта ДЕВУШКА ещё не только программировать, но и в ИЗБУ и КОНЯ. Подписывайся на канал и не пропускаем видосики.

@syryan2741

2 жыл бұрын

@@webelart 👍

@user-wt8sq9om6c

2 жыл бұрын

@@webelart 😄😁😀

@snakedesignermotion_graphic

9 ай бұрын

@@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 Не получаеться,уже все перепроверил(( Подскажите пожалуйста как исправить это?(

@mostbest88

Жыл бұрын

Доброго дня, Елена. Я присоединяюсь к вопросу @ant3413. И хотел бы уточнить следующий момент (10:14 минута в видео) Вы распечатываете this.slideNodes и получаете список слайдов. Однако, если я его распечатываю, то получаю массив пустых элементов Array(4) [ undefined, undefined, undefined, undefined ]. Я делал у себя для дополнительной проверки короткий скрипт и получил тот же результат

@mostbest88

Жыл бұрын

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; }

@mostbest88

Жыл бұрын

Однако, если я добавляю return addClass(item), тогда все работает.

Спасбо. Очень полезно и интересно. Только одно маленькое оптимизаторское предложение: 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)); }

а зачем, если есть свайпер ?

@webelart

Жыл бұрын

Чтобы уметь самому делать.

@user-dv8co2zg9f

Жыл бұрын

Свайпер не сам себя родил, правильно? Кто-то же его написал. Многим интересно как работает слайдер и как его написать с нуля. Со времен похорон jQuery хороших готовых слайдеров не так уж и много осталось. Если задача реализовать максимально простой слайдер на странице, то я скорее всего выберу именно вариант из видео. Зачем тянуть здоровенную библиотеку, если большая часть функционала мне вообще не нужна? А тут цена вопроса парочка небольших js файлов и стили.