Спасибо вам, за ваш труд! Хотелось бы больше таких уроков, где показывается как разрабатываются такие плагины)
@maxgraph3 жыл бұрын
Пожалуйста)
@246Dron2 жыл бұрын
@@maxgraph но что, если я change стилизую как прогресс бар под картинками? А так же прогресс бар меньше самого тела слайдера. Т. е. это грид сетка 3 на2: изображение занимает весь верхний ряд из 3х клеток, внизу соответственно "Было", прогрессбар, "стало". Появляются некорректные смещения. При этом я задаю left и width в процентах. Подозреваю, что нужно по другому считать координату X. Не от body. Тут нужно решение более опытных программистов.
@staschee68403 жыл бұрын
Красота, именно то, что искал) Доходчиво и понятно, очень приятно слушать. Однозначно подписка!
@maxgraph3 жыл бұрын
Спасибо)
@AOFTG3 жыл бұрын
Класс, спасибо. Помню была задача сделать такой слайдер, сам придумать решение не смог, искал плагины.... Теперь будет рабочая своя штучка))
@maxgraph3 жыл бұрын
Пожалуйста)
@smile88d2 жыл бұрын
Спасибо! Очень понятно, по аналогии легко в свой проект внедрить!
@maxgraph2 жыл бұрын
Пожалуйста)
@k0rsoYD3 жыл бұрын
Очень было интересно разобрать такой плагин и у вас всё понятно!
@maxgraph3 жыл бұрын
Отлично)
@mihailka56402 жыл бұрын
Чтобы бифор картинка была более менее адаптивной при уменьшении вьюпорта можно еще добавить window.onresize = () => { let width = slider.offsetWidth; beforeImage.style.width = `${width}px`; }; есть небольшой косяк с тем что видимая часть картинки и крутилка процентно начинают занимать больше или меньше ширины если находятся не на 50% ширины (места в слайдере), но в целом смотрится норм. Можно поправить несложной математикой. Благодарю автора уроков за труд!
@maxgraph2 жыл бұрын
Спасибо, принял)
@dmitrysasaev7349 Жыл бұрын
Куда именно вы это вставляете? У меня 6 таких слайдеров на странице. При изменении размеров вьюпорта всегда ресайзится ТОЛЬКО последний... В чем тут может быть дело?
@mihailka5640 Жыл бұрын
@@dmitrysasaev7349 Охх, друг) Я уже не помню что там делал) Возможно нужно заменить querySelector на getElementBy. Почитай про их различия. Обычно когда работает только последний или выводится из какого-то массива элементов только последний элемент, тогда дело именно в этих способах нахождение эл-тов. Я даже не знаю, найду не найду свой код)))
@dmitrysasaev7349 Жыл бұрын
@@mihailka5640 спасибо, попробую! Но если вдруг получится найти код, буду признателен)
@tis_cake3 жыл бұрын
Отличный урок.
@maxgraph3 жыл бұрын
Спасибо)
@yusif41833 жыл бұрын
Отличное видео.
@maxgraph3 жыл бұрын
Спасибо)
@miraigrafit78653 жыл бұрын
Круто!)
@maxgraph3 жыл бұрын
Спасибо)
@Learn-Dev_3 жыл бұрын
Круто!!!
@maxgraph3 жыл бұрын
Спасибо)
@denmccormik76543 жыл бұрын
спасибо, полезно
@maxgraph3 жыл бұрын
Пожалуйста)
@user-xt1ns1br7o Жыл бұрын
Полезная вещь, спасибо. А зачем искать картинку внутри и вешать обработчики на body, если можно повесить на сам слайдер?
@SergMcl7 ай бұрын
Хорошее видео. Понял принцип работы. А то гуглил, а вариант без jquery и не найдешь. Не понял только про preventDefault. Вижу, что без него ерунда получается (при незажатой левой кнопке мыши бегунок иногда все равно прилипает к курсору и слайдер продолжает работать). Но не понял, почему (ведь isActive при mouseup стал false) и как preventDefault решил эту проблему.
@maxgraph6 ай бұрын
Prevent отключает стандартное поведение элемента
@dashasharafutdinova6580 Жыл бұрын
Добрый день, спасибо вам большое, ваше видео помогло мне реализовать данную функцию. 😊 Но я столкнулась с такой проблемой, данный слайдер я хочу использовать на нескольких изображений, но на других функциях не срабатывает, можете ли вы подсказать, как решить данную проблему(
@user-mw8xc4of7c2 жыл бұрын
Здравствуйте, спасибо за Ваш труд! Не подскажите, почему let shift может не считываться в '${shift}px'? В консоли нет ошибок, но код не работает(
@maxgraph2 жыл бұрын
Здравствуйте, надо бы посмотреть
@kvitka732 жыл бұрын
у вас не те кавычки, должны быть косые
@user-dv9fk1hd3s2 жыл бұрын
у меня мобильная версия нормально из браузера работала (Chrome 95) UPD: Это потому что в последнем eventListener в конце pauseEvents() забыл прописать - с ним посыпались ошибки в консоли. Ещё на десктопе при движениях мыши иногда срабатывает выделение картинок (они подсвечиваются синим). Избавился от этого с помощью slider.addEventListener('selectstart', (event) => {event.preventDefault()})
@maxgraph2 жыл бұрын
Спасибо)
@user-ce4vt6vv8r2 жыл бұрын
Спасибо за рекомендацию про выделение картинки! Помогло!
@ivanvasilevsky41123 жыл бұрын
Класс. А какая у вас тема в VScode?
@maxgraph3 жыл бұрын
One monokai
@ivanvasilevsky41123 жыл бұрын
@@maxgraph Спасибо)
@rossmanov7 ай бұрын
Конечно круто, но есть сомнения по поводу использования абсолютного позиционирования. Вдруг кто то накинет внешнему контейнеру overflow: hidden либо побалуется с z-index? тогда ничего работать не будет, либо будет, но криво
@maxgraph7 ай бұрын
Ну у всех должна быть голова на плечах) и можно все поправить если что
@user-nd6mr6zx3h9 ай бұрын
а если у меня галерея с до/после?
@maxgraph9 ай бұрын
Нужно будет переписать код на несколько элементов, через querySelectorAll и forEach
@BMikel3 жыл бұрын
А как же все-таки сделать чтобы images ресайзились?
@maxgraph3 жыл бұрын
В событии ресайза просто пересчитать размер
@daniilsafronov4550 Жыл бұрын
Косяк косячный :) for (i=0; E? < e.changedTouches... XD Действительно с браузером что-то не то :)))
@BMikel3 жыл бұрын
А как сделать чтоб в одном документе несколько таких слайдеров работали, в разных местах верстки?
@maxgraph3 жыл бұрын
Чепез циклы нужно переписать
@BMikel3 жыл бұрын
@@maxgraph не получается. пока сложно для меня
@anton-trofimov2 жыл бұрын
@@BMikel пишешь вместо querySelector querySelectorAll, называешь, к примеру, sliders, затем sliders.forEach(slider =>{ТЕЛО ФУНКЦИИ}) в теле функции остальные переменные объявляешь, только теперь вместо document в двух надо искать в slider, и переносишь оставшийся код в цикл
@dmitrysasaev7349 Жыл бұрын
@@anton-trofimov, тоже не понимаю. В какой цикл переносить оставшийся код? sliders.forEach(slider =>{ТЕЛО ФУНКЦИИ}) Если просто перенести в тело функции - консоль ругается, даже если искать в slider
@anton-trofimov Жыл бұрын
@@dmitrysasaev7349 значит что-то не так сделали. Я проверял, работает
@user-fs3yr9yk6n2 жыл бұрын
8:51 как исправилось "beofre"? спасибо
@maxgraph2 жыл бұрын
Уж не вспомню)
@user-fs3yr9yk6n2 жыл бұрын
@@maxgraph ну я подумал прога какая, которую по сей день юзаешь
@cg_man3 жыл бұрын
Единственное, если с боку от такого слайдера будет контент, на котором надо кликать, то ползунок будет перепрыгивать.
@@maxgraph картинки без фона накладываются друг на друга, получается так что кусочек изображение before виден, если полностью выбрано изображение after
@ensintik3253 Жыл бұрын
@@m0zerGo Решил данную проблему?
@m0zerGo Жыл бұрын
@@ensintik3253 неа
@dominskyi78572 жыл бұрын
72 строка. for (i = 0; е < e.changedTouches.length; i++) на скільки я розумію, там повинно бути i