Отображение клавиш со стрелками для функции прокрутки?

Question

Я запускаю слайд-шоу на сайте клиента. Слайд-шоу анимирует каждый слайд и полагается исключительно на колесико прокрутки мыши, хотя оно также "смахивает", когда на устройствах с сенсорным экраном.

Здесь важно отметить, что страница не прокручивается при использовании колеса прокрутки, она только активирует анимацию следующего слайда. Веб-страница никогда не ругается в традиционном смысле...

Однако некоторые люди не используют колесо прокрутки, они используют стрелки клавиатуры.

Есть ли способ, в идеале с помощью JavaScript, заставить клавиши со стрелками эмулировать прокрутку колесика мыши?

Я прошу прощения за отсутствие кода или предыдущие усилия - я не смог ничего найти в отношении этой проблемы, и код хорошо встроен в расширение Slideshow. Я надеюсь добавить свой собственный JS в дополнение к базовому слайд-шоу.

Answer 1

Вы можете попытаться вызвать событие mousewheel для элемента галереи кодом, используя что-то вроде этого:

var element = <reference to the element the mousewheel events are bound to>

document.addEventListener('keydown', function(e){
    var event = new Event('MouseEvents');
    event.initEvent('mousewheel', true, true);

    switch(e.keyCode){
        case '37':
            event.wheelDelta = -1;
            element.dispatchEvent(event);
            break;
        case '39':
            event.wheelDelta = 1;
            element.dispatchEvent(event);
            break;
    }
});

https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events

Answer 2

Вы можете попробовать что-то вроде этого. Это не фактическое решение, а подход.

$('#someContainer').scroll(function(){
       $( "#target" ).keydown();
    })

Answer 3

Вы могли бы сделать что-то вроде этого:

yourElement.addEventListener('onkeydown', function(e) {
    var key = e.which || e.keyCode;
    if (key === 37) { // arrow left
        // Your code here
    } else if (key === 39) { // arrow right
        // Your code here
    }
});