Спасибо! Было очень полезно и познавательно. Но можно проще поступить с точками. 1. При создании этих элементов добавляем им дата-атрибут с индексом. 2. Добавляем ещё одно свойство - "prevSlide", которое по умолчанию равно 0. 3. При клике на точку определяем её индекс без цикла -просто из дата-атрибута берём. 4. В методе changeCurrentSlide делаем: this.dotsNodes[this.prevSlide].classList.remove(GalleryActiveDotClassName); this.dotsNodes[this.currentSlide].classList.add(GalleryActiveDotClassName); this.prevSlide = this.currentSlide; Меньше кода + никакой возни с циклами и проверками индексов.
Только начал изучать ООП и искал простенький проект реализованный на нем. Слов нет, все четко, кратко и понятно!!! Жалко что нет геттеров и сеттеров, но итак видео просто супер, большое спасибо! Впервые встретил на практике привязку контекста, сижу ломаю голову, а если мы хотим привязать через call как изменить код =) Немного изменил код, чтобы поверх картинки был текст на полупрозрачном фоне, добавил снизу две кнопки и input, что бы можно было либо получить текст текущего слайдера в инпут либо наоборот задать текст из инпута в текущий слайдер. И добавил функцию auto прокрутки слайдов через setInterval. Я так понимаю надо при pointerenter удалять timer-id, что бы при наведении мышки слайды переставали крутиться, а при pointerleave запускать поновой. Хотя как это будет работать на телефоне не знаю, но на компьютере все ок. Либо для телефона надо на pointerup сначала удалить timer-id (если вдруг он был) и снова запустить.
Афигенный урок. Большое спасибо! Было бы ещё круто добавить дополнение в код, что бы когда происходит swipe на другую картинку и пользователь не отпуская палец от экрана вдруг передумывает и возвращает картинку в исходное положение, то переход не срабатывает и остаётся всё так, как есть.
Ещё нюанс: В самом конце нужно добавить в стили .gallery-line-container { overflow: hidden; } Иначе видны края сосендих картинок в окне. Я сначала сам это пофиксил, а потом перематывал видео и искал, как ты это пофиксила (думал, что что-то пропустил). И где-то на ометке в 17:19 у тебя это появлятся в стилях буквально на полсекунды. Видимо, забыла подмонтировать тот кусок, где ты об этом говоришь. :) А вот это можно удалить: .gallery-line { overflow: hidden; }
У вас получилось это пофиксить с помощью .gallery-line - overflow: hidden? Я так понял, что этот отступ появляется не столько из-за скрола элемента обертки, а из-за общего скрола страницы. То есть в момент загрузки страницы, пока еще не загрузились все картинки/стили у страницы присутствует скрол. В этот момент js успевает отработать и высчитывает ширину слайда с учетом этого скрола. В результате по завершению загрузки мы видим часть следующего слайда.
@@mostbest88 Это получается пофиксить именно так, как выше написал автор. комента. я это пишу больше для людей которые будут смотреть это видео и столкнуться с этой проблемой)
На 12:30 не поставлена буква s (секунды), может быть при монтаже этот момент удалился. Но просто БЕЗГРАНИЧНАЯ благодарность за такие уроки. Готов даже проспонсировать продолжение. Очень хочется развить следующие моменты: 1. Возможность настраивать опции для нескольких слайдеров на одной странице; 2. Возможность отображать разное количество слайдов; 3. Возможность выбора - Задавать либо фиксированные размеры слайдов, либо указывать количество отображаемых слайдов на разных точках останова; 4. При отображении разного количества пролистывать по одному или по несколько слайдов (отсюда и количество точек должно быть разным); 5. Бесконечная прокрутка.
Спасибо большое! Очень приятно. Пока не уверена, что в ближайшем будущем буду развивать галерею, даже за спонсорство, но это конечно очень приятно :) Но я учту, что такие штуки интересны и если будет много запросов, посмотрим. Возможно тогда уже создам новые уроки с доразвитием галереи.
Пытаюсь устроиться в компанию на стажировку в качестве реакт разработчика. По тех. заданию мне нужно сделать вот именно такую карусель, но с применением реакт. Будет ли это нарушением концепции реакт разработки, если я сделаю такую же архитектуру, не дробя на компоненты, только вместо html файла -- jsx файл (компонент App)? Спасибо за такие классные и понятные видео)
На реакте можно использовать подобный подход, как вы описали и ссылаться на ref. Но обычно я всегда такую тему воспринимала как костыль. Для быстрого решения - ок, но для постоянного может вызывать неудобства просто потому что каждый раз при её использовании, нужно добавлять refs, не забыть почистить события в componentWillUnmount. Если делать по красоте, то я бы сделала чтобы было удобно: 1. Вынести в отдельную компоненту, там же стили. 2. Сделать так, чтобы где бы я не заиспользовала ее, мне нужно было бы просто импортнуть эту галерею и не заботиться о разрушении и прочем. Например, посмотрите здесь как оформляется swiperjs.com/react: console.log('slide change')} onSwiper={(swiper) => console.log(swiper)} > Slide 1 Slide 2 Slide 3 Slide 4 ... Опции в пропсах, обёртки для слайдов тоже реакт компоненты. В самих компонентах уже либо использовать чистый код с реальным DOM, либо технологии и удобства реакта: state, формирование внутренних элементов (manageHTML), событий, хотя здесь возможно всё-равно будет смесь реального дома и реакта, т.к. некоторые события нужны на window. Короче надо пробовать :). Успехов! И да, если будете опираться на текущий код, здесь писали что есть проблемы с событиями на андроиде, не работает. Нужно поменеджерить события pointer, понять почему не отрабатывает корректно.
а можно узнать, а в реальных проектах поля класса (переменные) такжя объявляются? По всему коду, вот нужно здесь, здесь и обьявлю? Или все же в начале класса лушче это делать?
Круто! Я рада, что получилось! Про Lazy Load - это классная тема. Но в неё нужно погрузиться, чтобы протестировать и чтобы всё хорошо получилось. Обычно я такие штуки делала через дополнительный атрибут например data, куда кладётся url картинки, а потом он достаётся, когда на картинке находишься и вставляется в src. Что-то типа такого. Про spincrement - это что-то отдельное от галереи? Либо на картинке его обозначение, сколько ей ещё осталось грузиться, наподобие умного спикера что ли?
очень годный контент, поставил лайк тут и на гитхабе звездочку) ну и подписался и нажал на колоколчик{нажимаю на колокол кстати очень редко и таких каналов у меня единицы из сотни других каналов} ))))
Скажите пожалуйста а можно сделать так что б можно было менять количество одновременного показа слайдов, допустим стоит задача добавить несколько слайдов которые так же движутся друг за другом ?
Такую штуку прикольно реализовать через опции. Из основных задач, которые с ходу вижу: 1. Сделать пересчёт текущих слайдов по факту их уже будет не один, а несколько активных. 2. Учитывать быстроту сдвига пальцем, т.к. за раз может смениться не один активных слайд в зависимости от этого параметра. 3. Хорошо бы учитывать респонсив, т.е. это также через опции, например при 1000px показывать 3 слайда, 700px 2 слайда и т.д. Задачка хорошая и полезная, я подумаю над продолжением написания текущей галереи с новыми опциями.🤔
Отличный материал! Небольшая сложность: плохо перелистываются слайды на небольших устройствах. Достаточно это заметить в режиме f12. Слайд попросту отцепляется от пальца/мышки и не перелистывается. Даже в примере на гитхабе. В чем может быть проблема? Я не силен в js.
Для продакшен решения, нужно получше потестировать в разных устройствах. Судя по описанной проблеме, дело в событиях. Скорее всего какое-то отрабатывает раньше, чем нужно (pointerup или pointercancel). Обычно в подобных галереях используются события для мобилок из серии touch events + для мышки из серии mouse events. В текущем примере для упрощения решила использовать pointer events (которые работают с touch и с mouse), но видимо бажит в каких-то устройствах и нужно тестить, корректировать.
Здравствуйте, Елена. Безумно классно подаете материал, очень сложные темы простым языком, у вас дар преподавателя от Бога. Я правда не все понимаю, так как недавно в этой теме. Подскажите если будет время и возможность, следующее. Время урока 2:13 47 & 48 строки .containerNode Определяем ноду и в нее записываем. Я поиск перерыл так и не понял, ничего не выдается кроме Node JS. Может я не правильно делаю поисковые запросы. Что такое нода и почему мы повторяем .containerNode(мы это сами придумали для удобства?). Объясните, пожалуйста, или подскажите как искать, сам изучу. Благодарю за ваше время и силы, подписан, лайки ставлю. С уважением, Андрей.
Вы вероятно уже разобрались. this.containerNode по факту это придуманное название. Node - потому что узел дерева html. Поэтому если я что-то беру из дерева html, то добавляю приписку Node, чтобы просто переменные визуально группировать :) Эти названия не имеют никакой связи с NodeJs, NodeJs позволяет писать backend c использованием JavaScript. Здесь мы юзаем клиентский JavaScript.
@@webelart ого...я думал мне не ответят)) Спасибо вам большое, за то что помогли мне разобраться. Вы чудо!! С прошедшими вас праздниками) Здоровья, успехов во всем и ещё больше отдачи от своего канала и преподавания в виде множества подписок и живых вовлеченных учеников и коллег. У вас сильный контент, должно быть в сотни раз больше людей. Думаю так и будет, приятно быть в начале пути с человеком и наблюдать за его свершениями.
Можно попробовать каждой точке задать outline: none; в css: .gallery-dot {outline: none}; Про скролл не очень понимаю, что за скролл, у самой страницы? Было бы прикольно скриншотик показательный.
@@webelart Здравствуйте, Лена!) Спасибо большое, что заметили мои комментарии. Сделал, то что писали ниже в комментариях. ".gallery-line {touch-action: none} в сss напиши. В комментариях к предыдущей части отписали" Прописал это свойство и все заработало, специально скидывал знакомым с телефоном, листали. Если честно пока разбираюсь по наитию, ваш код для меня сложный очень в плане написания с нуля самостоятельно. Однако, я занимаюсь каждый день и смог реализовать ваш код, правда недавно обнаружил маленький баг, но исправлю потом, как будет время. Сейчас активно проверку формы делаю. Ещё раз говорю вам большое спасибо за ваш канал, ваши силы и труды. Вы большая молодец! Сам снимал видео по другой сфере, знаю как это сложно. У вас классный сайт с уроками и полезными материалами, ваш личный который. Особенно понравилось, что прелоадер в виде сердечка мигает))
@@andrey_andreevich_official Спасибо большое! ❤️ Очень приятно :)) Да, ютуб - это целая жизнь, в которую нужно инвестировать, если хочется развивать. Про баг, я думаю там может встречаться. Я протестила только на Mac OS и iPhone, хорошо бы ещё на Windows и на андроид такие штуки смотреть, про touch-action учту, спасибо! Рада, что разобрались и воплотили пример! 🔥
Написал код как у вас, пошагово делал. Свайпы не работают на телефоне, у моих знакомых тоже. Думал ошибки сделал, но проверил вашу работу на телефону, тоже самое...а ведь ток из-за этого и стал изучать ваш урок. Обидно(( я так и не понимаю пока как делать их, а везде требуют. В остальном все отлично у вас, мне понравилось.
Здравствуйте, Елена. В эмуляторах галерея работает хорошо, но непосредственно на мобильных устройствах (будь то андройд или iOS) перелистывание срабатывает крайне плохо. Возможно выбранные события pointerup, pointerdown, pointermove не очень годятся для мобильных устройств.
Поправка, события подходят, но срабатывает еще одно событие, которое мешает нормальной работе слайдера (pointercancel). Если в CSS у класса .gallery добавить свойство touch-action: none, то всё ок. Работает.
не обязательно делать из неё компонент, сохранить как есть gallery-lib. Далее уже где нужно использовать в react, создать DOM для нее такой же в render реакт-компоненты, в componendDidMount через ref создать экземпляр класса, не забывать в componentWillUnmount вызвать метод destroy. Должно работать.
Обратил внимание, что в некоторых случаях у слайдов справа образуется отступ в 17px. В моем случае слайдер занимает 100% ширины экрана. В момент когда с помощью this.lineContainerNode.getBoundingClientRect().width рассчитывается ширина слайда, стили еще не успевают погрузиться и на странице присутствует полоса прокрутки. В результате по завершению загрузки, слайды имеют не 100% ширину, а ширину за вычетом 17px (ширины полосы прокрутки).
Это наверное лучшее что я видел на TH-cam про создание слайдеров, действительно очень круто и современно 👍
Спасибо! 😍❤️
Спасибо! Было очень полезно и познавательно.
Но можно проще поступить с точками.
1. При создании этих элементов добавляем им дата-атрибут с индексом.
2. Добавляем ещё одно свойство - "prevSlide", которое по умолчанию равно 0.
3. При клике на точку определяем её индекс без цикла -просто из дата-атрибута берём.
4. В методе changeCurrentSlide делаем:
this.dotsNodes[this.prevSlide].classList.remove(GalleryActiveDotClassName);
this.dotsNodes[this.currentSlide].classList.add(GalleryActiveDotClassName);
this.prevSlide = this.currentSlide;
Меньше кода + никакой возни с циклами и проверками индексов.
Только начал изучать ООП и искал простенький проект реализованный на нем. Слов нет, все четко, кратко и понятно!!! Жалко что нет геттеров и сеттеров, но итак видео просто супер, большое спасибо! Впервые встретил на практике привязку контекста, сижу ломаю голову, а если мы хотим привязать через call как изменить код =)
Немного изменил код, чтобы поверх картинки был текст на полупрозрачном фоне, добавил снизу две кнопки и input, что бы можно было либо получить текст текущего слайдера в инпут либо наоборот задать текст из инпута в текущий слайдер. И добавил функцию auto прокрутки слайдов через setInterval. Я так понимаю надо при pointerenter удалять timer-id, что бы при наведении мышки слайды переставали крутиться, а при pointerleave запускать поновой. Хотя как это будет работать на телефоне не знаю, но на компьютере все ок. Либо для телефона надо на pointerup сначала удалить timer-id (если вдруг он был) и снова запустить.
Спасибо за урок! Было полезно, полностью проработал с вами материал
Добрый день, все очень круто. А можно ли как то решить блокировку вертикального скорола странницы?
Афигенный урок. Большое спасибо!
Было бы ещё круто добавить дополнение в код, что бы когда происходит swipe на другую картинку и пользователь не отпуская палец от экрана вдруг передумывает и возвращает картинку в исходное положение, то переход не срабатывает и остаётся всё так, как есть.
Хорошее замечание.
Ещё нюанс:
В самом конце нужно добавить в стили
.gallery-line-container {
overflow: hidden;
}
Иначе видны края сосендих картинок в окне. Я сначала сам это пофиксил, а потом перематывал видео и искал, как ты это пофиксила (думал, что что-то пропустил). И где-то на ометке в 17:19 у тебя это появлятся в стилях буквально на полсекунды. Видимо, забыла подмонтировать тот кусок, где ты об этом говоришь. :)
А вот это можно удалить:
.gallery-line {
overflow: hidden;
}
У вас получилось это пофиксить с помощью .gallery-line - overflow: hidden? Я так понял, что этот отступ появляется не столько из-за скрола элемента обертки, а из-за общего скрола страницы. То есть в момент загрузки страницы, пока еще не загрузились все картинки/стили у страницы присутствует скрол. В этот момент js успевает отработать и высчитывает ширину слайда с учетом этого скрола. В результате по завершению загрузки мы видим часть следующего слайда.
@@mostbest88 Это получается пофиксить именно так, как выше написал автор. комента. я это пишу больше для людей которые будут смотреть это видео и столкнуться с этой проблемой)
На 12:30 не поставлена буква s (секунды), может быть при монтаже этот момент удалился. Но просто БЕЗГРАНИЧНАЯ благодарность за такие уроки. Готов даже проспонсировать продолжение. Очень хочется развить следующие моменты:
1. Возможность настраивать опции для нескольких слайдеров на одной странице;
2. Возможность отображать разное количество слайдов;
3. Возможность выбора - Задавать либо фиксированные размеры слайдов, либо указывать количество отображаемых слайдов на разных точках останова;
4. При отображении разного количества пролистывать по одному или по несколько слайдов (отсюда и количество точек должно быть разным);
5. Бесконечная прокрутка.
Спасибо большое! Очень приятно. Пока не уверена, что в ближайшем будущем буду развивать галерею, даже за спонсорство, но это конечно очень приятно :) Но я учту, что такие штуки интересны и если будет много запросов, посмотрим. Возможно тогда уже создам новые уроки с доразвитием галереи.
Супер! Лайк, подписка!
❤️
чётенько )
Пытаюсь устроиться в компанию на стажировку в качестве реакт разработчика. По тех. заданию мне нужно сделать вот именно такую карусель, но с применением реакт. Будет ли это нарушением концепции реакт разработки, если я сделаю такую же архитектуру, не дробя на компоненты, только вместо html файла -- jsx файл (компонент App)? Спасибо за такие классные и понятные видео)
На реакте можно использовать подобный подход, как вы описали и ссылаться на ref. Но обычно я всегда такую тему воспринимала как костыль. Для быстрого решения - ок, но для постоянного может вызывать неудобства просто потому что каждый раз при её использовании, нужно добавлять refs, не забыть почистить события в componentWillUnmount. Если делать по красоте, то я бы сделала чтобы было удобно:
1. Вынести в отдельную компоненту, там же стили.
2. Сделать так, чтобы где бы я не заиспользовала ее, мне нужно было бы просто импортнуть эту галерею и не заботиться о разрушении и прочем.
Например, посмотрите здесь как оформляется swiperjs.com/react:
console.log('slide change')}
onSwiper={(swiper) => console.log(swiper)}
>
Slide 1
Slide 2
Slide 3
Slide 4
...
Опции в пропсах, обёртки для слайдов тоже реакт компоненты. В самих компонентах уже либо использовать чистый код с реальным DOM, либо технологии и удобства реакта: state, формирование внутренних элементов (manageHTML), событий, хотя здесь возможно всё-равно будет смесь реального дома и реакта, т.к. некоторые события нужны на window. Короче надо пробовать :). Успехов!
И да, если будете опираться на текущий код, здесь писали что есть проблемы с событиями на андроиде, не работает. Нужно поменеджерить события pointer, понять почему не отрабатывает корректно.
@@webelart Спасибо за Ваш ответ -- очень помогли)
а можно узнать, а в реальных проектах поля класса (переменные) такжя объявляются? По всему коду, вот нужно здесь, здесь и обьявлю? Или все же в начале класса лушче это делать?
Спасибо !!!! Все получилось❤
❤️❤️❤️ Крутота! :)
Прежде чем преступить к просмотру, скажу - безупречно!
Ждем от Вас бесконечный режим прокрутки этой галереи)
Спасибо большое! Про продолжение подумаю. 😉
Все получилось. Спасибо!
Покажите как сделать красиво Lazy load для изображений и контента?
Spincrement тоже интресно.
Еще раз спасибо!
Круто! Я рада, что получилось! Про Lazy Load - это классная тема. Но в неё нужно погрузиться, чтобы протестировать и чтобы всё хорошо получилось. Обычно я такие штуки делала через дополнительный атрибут например data, куда кладётся url картинки, а потом он достаётся, когда на картинке находишься и вставляется в src. Что-то типа такого.
Про spincrement - это что-то отдельное от галереи? Либо на картинке его обозначение, сколько ей ещё осталось грузиться, наподобие умного спикера что ли?
очень годный контент, поставил лайк тут и на гитхабе звездочку) ну и подписался и нажал на колоколчик{нажимаю на колокол кстати очень редко и таких каналов у меня единицы из сотни других каналов} ))))
Спасибо большое! 😍
Скажите пожалуйста а можно сделать так что б можно было менять количество одновременного показа слайдов, допустим стоит задача добавить несколько слайдов которые так же движутся друг за другом ?
Такую штуку прикольно реализовать через опции. Из основных задач, которые с ходу вижу:
1. Сделать пересчёт текущих слайдов по факту их уже будет не один, а несколько активных.
2. Учитывать быстроту сдвига пальцем, т.к. за раз может смениться не один активных слайд в зависимости от этого параметра.
3. Хорошо бы учитывать респонсив, т.е. это также через опции, например при 1000px показывать 3 слайда, 700px 2 слайда и т.д.
Задачка хорошая и полезная, я подумаю над продолжением написания текущей галереи с новыми опциями.🤔
Было бы очень здорово если б вы это реализовали 😊
А как сделать чтобы после пос.слайда переключался на первый слайд?
Отличный слайдер! Где можно исходники глянуть? Ссылка не работает((
@@AntonPivnenko я не выкладывала исходники.
Крутатень! А возможно добавить туда загрузку изображений на чистом js? С пк или по ссылке...
Спасибо! :) Можно всё, но это уже бекэнд подключать нужно.
Отличный материал! Небольшая сложность: плохо перелистываются слайды на небольших устройствах. Достаточно это заметить в режиме f12. Слайд попросту отцепляется от пальца/мышки и не перелистывается. Даже в примере на гитхабе. В чем может быть проблема? Я не силен в js.
Для продакшен решения, нужно получше потестировать в разных устройствах.
Судя по описанной проблеме, дело в событиях. Скорее всего какое-то отрабатывает раньше, чем нужно (pointerup или pointercancel). Обычно в подобных галереях используются события для мобилок из серии touch events + для мышки из серии mouse events. В текущем примере для упрощения решила использовать pointer events (которые работают с touch и с mouse), но видимо бажит в каких-то устройствах и нужно тестить, корректировать.
.gallery-line {touch-action: none} в сss напиши. В комментариях к предыдущей части отписали
@@СергейПресняков-о4р О! Спасибо, тоже с этой проблемой столкнулся)
@@СергейПресняков-о4р Спасибо!!!!!!!!
Очень полезно, спасибо! Подскажите как убрать пространство над слайдером, чтобы он вплотную прижался к верхнему краю страницы
У тега body есть padding: 1rem. Его просто удалить.
Cool one !!!
Thank you! ❤️
Здравствуйте, Елена. Безумно классно подаете материал, очень сложные темы простым языком, у вас дар преподавателя от Бога. Я правда не все понимаю, так как недавно в этой теме. Подскажите если будет время и возможность, следующее.
Время урока 2:13
47 & 48 строки
.containerNode
Определяем ноду и в нее записываем. Я поиск перерыл так и не понял, ничего не выдается кроме Node JS. Может я не правильно делаю поисковые запросы. Что такое нода и почему мы повторяем .containerNode(мы это сами придумали для удобства?). Объясните, пожалуйста, или подскажите как искать, сам изучу.
Благодарю за ваше время и силы, подписан, лайки ставлю.
С уважением, Андрей.
Вы вероятно уже разобрались. this.containerNode по факту это придуманное название. Node - потому что узел дерева html. Поэтому если я что-то беру из дерева html, то добавляю приписку Node, чтобы просто переменные визуально группировать :) Эти названия не имеют никакой связи с NodeJs, NodeJs позволяет писать backend c использованием JavaScript. Здесь мы юзаем клиентский JavaScript.
@@webelart ого...я думал мне не ответят)) Спасибо вам большое, за то что помогли мне разобраться. Вы чудо!! С прошедшими вас праздниками) Здоровья, успехов во всем и ещё больше отдачи от своего канала и преподавания в виде множества подписок и живых вовлеченных учеников и коллег. У вас сильный контент, должно быть в сотни раз больше людей. Думаю так и будет, приятно быть в начале пути с человеком и наблюдать за его свершениями.
@@andrey_andreevich_official Спасибо огромное!!! Вас тоже с прошедшими праздниками! 🎉
Здравствуйте, а подскажите как вывести общее кол-во слайдов и на каком находишься сейчас?
Здравствуйте! Для этого можно попробовать использовать переменные this.size и this.currentSlide + 1 (чтобы числа начинались с 1).
@@webelart Спасибо!)
Скажите пожалуйста, как убрать выделение .gallery-dots при не попадании по точкам? + Как убрать скролл вверх-вниз при взаимодействии со слайдером?
Можно попробовать каждой точке задать outline: none; в css: .gallery-dot {outline: none}; Про скролл не очень понимаю, что за скролл, у самой страницы? Было бы прикольно скриншотик показательный.
Ниже в комментариях нашел ваш ответ и решение от другого человека, все работает))
Вижу разобрались, не подскажете, что конкретно сделали?
@@webelart Здравствуйте, Лена!) Спасибо большое, что заметили мои комментарии. Сделал, то что писали ниже в комментариях.
".gallery-line {touch-action: none} в сss напиши. В комментариях к предыдущей части отписали"
Прописал это свойство и все заработало, специально скидывал знакомым с телефоном, листали. Если честно пока разбираюсь по наитию, ваш код для меня сложный очень в плане написания с нуля самостоятельно. Однако, я занимаюсь каждый день и смог реализовать ваш код, правда недавно обнаружил маленький баг, но исправлю потом, как будет время. Сейчас активно проверку формы делаю.
Ещё раз говорю вам большое спасибо за ваш канал, ваши силы и труды. Вы большая молодец! Сам снимал видео по другой сфере, знаю как это сложно. У вас классный сайт с уроками и полезными материалами, ваш личный который. Особенно понравилось, что прелоадер в виде сердечка мигает))
@@andrey_andreevich_official Спасибо большое! ❤️ Очень приятно :)) Да, ютуб - это целая жизнь, в которую нужно инвестировать, если хочется развивать.
Про баг, я думаю там может встречаться. Я протестила только на Mac OS и iPhone, хорошо бы ещё на Windows и на андроид такие штуки смотреть, про touch-action учту, спасибо!
Рада, что разобрались и воплотили пример! 🔥
Написал код как у вас, пошагово делал. Свайпы не работают на телефоне, у моих знакомых тоже. Думал ошибки сделал, но проверил вашу работу на телефону, тоже самое...а ведь ток из-за этого и стал изучать ваш урок. Обидно(( я так и не понимаю пока как делать их, а везде требуют. В остальном все отлично у вас, мне понравилось.
Я так понимаю телефон Android системы. Возможно там есть какой-то баг.
@@webelart да не...там просто то свойство, что выше написал)) Всё четенько)
Здравствуйте, Елена. В эмуляторах галерея работает хорошо, но непосредственно на мобильных устройствах (будь то андройд или iOS) перелистывание срабатывает крайне плохо. Возможно выбранные события pointerup, pointerdown, pointermove не очень годятся для мобильных устройств.
Поправка, события подходят, но срабатывает еще одно событие, которое мешает нормальной работе слайдера (pointercancel). Если в CSS у класса .gallery добавить свойство touch-action: none, то всё ок. Работает.
А может кто подсказать как из этой галереи сделать react компонент?
не обязательно делать из неё компонент, сохранить как есть gallery-lib. Далее уже где нужно использовать в react, создать DOM для нее такой же в render реакт-компоненты, в componendDidMount через ref создать экземпляр класса, не забывать в componentWillUnmount вызвать метод destroy. Должно работать.
Убила базар на счёт тупых блондинок. Было бы вообще круто глянуть как сделать этот крутейший слайдер бесконечным.
Обратил внимание, что в некоторых случаях у слайдов справа образуется отступ в 17px. В моем случае слайдер занимает 100% ширины экрана. В момент когда с помощью this.lineContainerNode.getBoundingClientRect().width рассчитывается ширина слайда, стили еще не успевают погрузиться и на странице присутствует полоса прокрутки. В результате по завершению загрузки, слайды имеют не 100% ширину, а ширину за вычетом 17px (ширины полосы прокрутки).