Почему touch slider (не плагин) не работает когда я открываю консоль?

Question

[dexr0w]

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

Вот код: https://codepen.io/himonga/pen/xxJgNwL

Answer 1

[Вадим]

а с чего Вы решили, что у Вас touch слайдер? Где хоть один обработчик события touch*...?
Вижу только обработчики mouse* события.

В эмуляции девайса как раз включается эмуляция тача.

UPD: fix на скорую руку. Стоит конечно же вынести функции отдельно, чтобы не дублировать.

fix

let slider = document.querySelector('.container-3_1');
let innerSlider = document.querySelector('.container-3-1_blocks');


let pressed = false;
let startx;
let x;

slider.addEventListener('mousedown', (e)=> {
    pressed = true;
    startx = e.offsetX- innerSlider.offsetLeft;
    slider.style.cursor = 'grabbing'
})

slider.addEventListener('touchstart', (e)=> {
    pressed = true;
    const evt = e.touches[0]
    startx = evt.clientX- innerSlider.offsetLeft;
    slider.style.cursor = 'grabbing'
})

slider.addEventListener('mouseenter', ()=> {
    slider.style.cursor = 'grab'
})

slider.addEventListener('mouseup', ()=> {
    pressed = false;
    slider.style.cursor = 'grab'
})

slider.addEventListener('touchend', ()=> {
    pressed = false;
    slider.style.cursor = 'grab'
})


slider.addEventListener('mousemove', (e)=> {
    if(!pressed) return;
    e.preventDefault();

    x = e.offsetX;

    innerSlider.style.left = `${x - startx}px`
    

    checkboundary()
})

slider.addEventListener('touchmove', (e)=> {
    if(!pressed) return;
    e.preventDefault();

    const evt = e.touches[0]
    x = evt.clientX;

    innerSlider.style.left = `${x - startx}px`
    

    checkboundary()
})


function checkboundary(){
    let outer = slider.getBoundingClientRect();
    let inner = innerSlider.getBoundingClientRect();

    if(parseInt(innerSlider.style.left) > 0) {
        innerSlider.style.left = '0px'
    } else if (inner.right < outer.right){
        innerSlider.style.left = `-${inner.width - outer.width}px`
    }
}