<div id="slider" class="slider">
        <div class="wrapped-slide">
            <div class="slide">

            </div>
            <div class="slide">

            </div>
            <div class="slide">

            </div>
            <div class="slide">

            </div>
            <div class="slide">

            </div>
            <div class="slide">

            </div>
            <div class="slide">

            </div>
            <div class="slide">

            </div>
            <div class="slide">

            </div>
            <div class="slide">

            </div>
            <div class="slide">

            </div>
            <div class="slide">

            </div>
            <div class="slide">

            </div>
            <div class="slide">

            </div>
            <div class="slide">

            </div>
            <div class="slide">

            </div>
            <div class="slide">

            </div>
            <div class="slide">

            </div>
        </div>
    </div>

        #slider {
            width: 90%;
            height: 500px;
            background-color: aqua;
            position: relative;
            padding: 20px;
            overflow: hidden;
            margin: auto;
        }

        .wrapped-slide {
            display: inline-flex;
            height: inherit;
        }

        .slide {
            position: relative;
            top: 0;
            left: 0;
            width: 248px;
            height: inherit;
            background-color: black;
            transform: translateX(0);
            flex-shrink: 0;
            border: 1px solid white;
        }

        let slide = document.querySelectorAll('.slide');
        let wrappedSlide = document.querySelector('.wrapped-slide');
        let slider = document.querySelector('.slider');

        let slideOne = slide[0];

        wrappedSlide.addEventListener('touchstart ', getCurCoordsInsideRect);
        wrappedSlide.addEventListener('mousedown', getCurCoordsInsideRect);

        function getCurCoordsInsideRect(event) {

            let sliderWidth = parseFloat(window.getComputedStyle(slider, null).getPropertyValue("width"));
            let wrappedSlideWidth = parseFloat(window.getComputedStyle(wrappedSlide, null).getPropertyValue("width"));
            let slidelWidth = parseFloat(window.getComputedStyle(slideOne, null).getPropertyValue("width"));

            event.preventDefault(); // предотвратить запуск выделения (действие браузера)

            let shiftX = event.clientX == undefined ?
                event.changedTouches[0].pageX - wrappedSlide.getBoundingClientRect().left :
                event.clientX - wrappedSlide.getBoundingClientRect().left;
            // shiftY здесь не нужен, слайдер двигается только по горизонтали

            document.addEventListener('mousemove', onMouseMove);
            document.addEventListener('mouseup', onMouseUp);

            function onMouseMove(event) {
                let newLeft = event.clientX == undefined ?
                    event.changedTouches[0].pageX - shiftX - slider.getBoundingClientRect().left :
                    event.clientX - shiftX - slider.getBoundingClientRect().left;

                // курсор вышел из слайдера => оставить бегунок в его границах.
                if (newLeft > 0) {
                    newLeft = 0;
                }

                let numberSlide = Math.floor(sliderWidth / slidelWidth) * slidelWidth;

                if (numberSlide <= 0) numberSlide = slidelWidth

                let rightEdge = (wrappedSlideWidth - numberSlide) * -1;
                if (newLeft < rightEdge) {
                    newLeft = rightEdge;
                }

                wrappedSlide.style.transform = `translateX(${newLeft}px)`;
            }

            function onMouseUp() {
                document.addEventListener('touchmove', onMouseMove);
                document.removeEventListener('mouseup', onMouseUp);
                document.removeEventListener('mousemove', onMouseMove);
            }

        };