JS-решения №17. Создаем слайдер до-после на чистом js

No video

JS-решения №17. Создаем слайдер до-после на чистом js

Рет қаралды 5,216

MaxGraph - cайты как страсть

Күн бұрын

Пікірлер: 70

@mister_robot01 3 жыл бұрын

Спасибо вам, за ваш труд! Хотелось бы больше таких уроков, где показывается как разрабатываются такие плагины)

@maxgraph 3 жыл бұрын

Пожалуйста)

@246Dron 2 жыл бұрын

@@maxgraph но что, если я change стилизую как прогресс бар под картинками? А так же прогресс бар меньше самого тела слайдера. Т. е. это грид сетка 3 на2: изображение занимает весь верхний ряд из 3х клеток, внизу соответственно "Было", прогрессбар, "стало". Появляются некорректные смещения. При этом я задаю left и width в процентах. Подозреваю, что нужно по другому считать координату X. Не от body. Тут нужно решение более опытных программистов.

@staschee6840 3 жыл бұрын

Красота, именно то, что искал) Доходчиво и понятно, очень приятно слушать. Однозначно подписка!

@maxgraph 3 жыл бұрын

Спасибо)

@AOFTG 3 жыл бұрын

Класс, спасибо. Помню была задача сделать такой слайдер, сам придумать решение не смог, искал плагины.... Теперь будет рабочая своя штучка))

@maxgraph 3 жыл бұрын

Пожалуйста)

@smile88d 2 жыл бұрын

Спасибо! Очень понятно, по аналогии легко в свой проект внедрить!

@maxgraph 2 жыл бұрын

Пожалуйста)

@k0rsoYD 3 жыл бұрын

Очень было интересно разобрать такой плагин и у вас всё понятно!

@maxgraph 3 жыл бұрын

Отлично)

@mihailka5640 2 жыл бұрын

Чтобы бифор картинка была более менее адаптивной при уменьшении вьюпорта можно еще добавить window.onresize = () => { let width = slider.offsetWidth; beforeImage.style.width = `${width}px`; }; есть небольшой косяк с тем что видимая часть картинки и крутилка процентно начинают занимать больше или меньше ширины если находятся не на 50% ширины (места в слайдере), но в целом смотрится норм. Можно поправить несложной математикой. Благодарю автора уроков за труд!

@maxgraph 2 жыл бұрын

Спасибо, принял)

@dmitrysasaev7349 Жыл бұрын

Куда именно вы это вставляете? У меня 6 таких слайдеров на странице. При изменении размеров вьюпорта всегда ресайзится ТОЛЬКО последний... В чем тут может быть дело?

@mihailka5640 Жыл бұрын

@@dmitrysasaev7349 Охх, друг) Я уже не помню что там делал) Возможно нужно заменить querySelector на getElementBy. Почитай про их различия. Обычно когда работает только последний или выводится из какого-то массива элементов только последний элемент, тогда дело именно в этих способах нахождение эл-тов. Я даже не знаю, найду не найду свой код)))

@dmitrysasaev7349 Жыл бұрын

@@mihailka5640 спасибо, попробую! Но если вдруг получится найти код, буду признателен)

@tis_cake 3 жыл бұрын

Отличный урок.

@maxgraph 3 жыл бұрын

Спасибо)

@yusif4183 3 жыл бұрын

Отличное видео.

@maxgraph 3 жыл бұрын

Спасибо)

@miraigrafit7865 3 жыл бұрын

Круто!)

@maxgraph 3 жыл бұрын

Спасибо)

@Learn-Dev_ 3 жыл бұрын

Круто!!!

@maxgraph 3 жыл бұрын

Спасибо)

@denmccormik7654 3 жыл бұрын

спасибо, полезно

@maxgraph 3 жыл бұрын

Пожалуйста)

@user-xt1ns1br7o Жыл бұрын

Полезная вещь, спасибо. А зачем искать картинку внутри и вешать обработчики на body, если можно повесить на сам слайдер?

@SergMcl 7 ай бұрын

Хорошее видео. Понял принцип работы. А то гуглил, а вариант без jquery и не найдешь. Не понял только про preventDefault. Вижу, что без него ерунда получается (при незажатой левой кнопке мыши бегунок иногда все равно прилипает к курсору и слайдер продолжает работать). Но не понял, почему (ведь isActive при mouseup стал false) и как preventDefault решил эту проблему.

@maxgraph 6 ай бұрын

Prevent отключает стандартное поведение элемента

@dashasharafutdinova6580 Жыл бұрын

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

@user-mw8xc4of7c 2 жыл бұрын

Здравствуйте, спасибо за Ваш труд! Не подскажите, почему let shift может не считываться в '${shift}px'? В консоли нет ошибок, но код не работает(

@maxgraph 2 жыл бұрын

Здравствуйте, надо бы посмотреть

@kvitka73 2 жыл бұрын

у вас не те кавычки, должны быть косые

@user-dv9fk1hd3s 2 жыл бұрын

у меня мобильная версия нормально из браузера работала (Chrome 95) UPD: Это потому что в последнем eventListener в конце pauseEvents() забыл прописать - с ним посыпались ошибки в консоли. Ещё на десктопе при движениях мыши иногда срабатывает выделение картинок (они подсвечиваются синим). Избавился от этого с помощью slider.addEventListener('selectstart', (event) => {event.preventDefault()})

@maxgraph 2 жыл бұрын

Спасибо)

@user-ce4vt6vv8r 2 жыл бұрын

Спасибо за рекомендацию про выделение картинки! Помогло!

@ivanvasilevsky4112 3 жыл бұрын

Класс. А какая у вас тема в VScode?

@maxgraph 3 жыл бұрын

One monokai

@ivanvasilevsky4112 3 жыл бұрын

@@maxgraph Спасибо)

@rossmanov 7 ай бұрын

Конечно круто, но есть сомнения по поводу использования абсолютного позиционирования. Вдруг кто то накинет внешнему контейнеру overflow: hidden либо побалуется с z-index? тогда ничего работать не будет, либо будет, но криво

@maxgraph 7 ай бұрын

Ну у всех должна быть голова на плечах) и можно все поправить если что

@user-nd6mr6zx3h 9 ай бұрын

а если у меня галерея с до/после?

@maxgraph 9 ай бұрын

Нужно будет переписать код на несколько элементов, через querySelectorAll и forEach

@BMikel 3 жыл бұрын

А как же все-таки сделать чтобы images ресайзились?

@maxgraph 3 жыл бұрын

В событии ресайза просто пересчитать размер

@daniilsafronov4550 Жыл бұрын

Косяк косячный :) for (i=0; E? < e.changedTouches... XD Действительно с браузером что-то не то :)))

@BMikel 3 жыл бұрын

А как сделать чтоб в одном документе несколько таких слайдеров работали, в разных местах верстки?

@maxgraph 3 жыл бұрын

Чепез циклы нужно переписать

@BMikel 3 жыл бұрын

@@maxgraph не получается. пока сложно для меня

@anton-trofimov 2 жыл бұрын

@@BMikel пишешь вместо querySelector querySelectorAll, называешь, к примеру, sliders, затем sliders.forEach(slider =>{ТЕЛО ФУНКЦИИ}) в теле функции остальные переменные объявляешь, только теперь вместо document в двух надо искать в slider, и переносишь оставшийся код в цикл

@dmitrysasaev7349 Жыл бұрын

@@anton-trofimov, тоже не понимаю. В какой цикл переносить оставшийся код? sliders.forEach(slider =>{ТЕЛО ФУНКЦИИ}) Если просто перенести в тело функции - консоль ругается, даже если искать в slider

@anton-trofimov Жыл бұрын

@@dmitrysasaev7349 значит что-то не так сделали. Я проверял, работает

@user-fs3yr9yk6n 2 жыл бұрын

8:51 как исправилось "beofre"? спасибо

@maxgraph 2 жыл бұрын

Уж не вспомню)

@user-fs3yr9yk6n 2 жыл бұрын

@@maxgraph ну я подумал прога какая, которую по сей день юзаешь

@cg_man 3 жыл бұрын

Единственное, если с боку от такого слайдера будет контент, на котором надо кликать, то ползунок будет перепрыгивать.

@maxgraph 3 жыл бұрын

Да, возможно.

@dmytroz.2084 2 жыл бұрын

change.addEventListener('mousedown', () => { isActive = true; }); body.addEventListener('mouseup', () => { isActive = false; }); body.addEventListener('mouseleave', () => { isActive = false; }); body.addEventListener('mousemove', e => {. ... }

@m0zerGo Жыл бұрын

А как сделать с png картинками?

@maxgraph Жыл бұрын

А в чем там отличие?

@m0zerGo Жыл бұрын

@@maxgraph картинки без фона накладываются друг на друга, получается так что кусочек изображение before виден, если полностью выбрано изображение after

@ensintik3253 Жыл бұрын

@@m0zerGo Решил данную проблему?

@m0zerGo Жыл бұрын

@@ensintik3253 неа