1

I am running a slideshow on a client site. The slideshow animates each slide, and relies SOLELY on the scrollwheel of the mouse although it also 'swipes' when in touchscreen devices.

It's important to note here that the page doesn't actually scoll when using the scrollwheel, it only activates the next slide animation. The webpage never actually scolls in the traditional sense...

However some people don't use a scrollwheel, they use keyboard arrows.

Is there a way, ideally using JavaScript, to force the arrow keys to emulate a single scroll of the mousewheel?

I apologise for lack of code or previous efforts - I haven't been able to find anything with regards to this problem and the code is well embedded in the Slideshow extension. I'm hoping to add my own JS to complement the base Slideshow.

Reverend2100
  • 810
  • 1
  • 7
  • 17
  • 1
    What about adding listeners to arrow keys? – marzelin Jul 25 '17 at 12:33
  • Can you modify the slideshow's code, or are you using a library that you want to interface cleanly with? – msanford Jul 25 '17 at 12:34
  • 1
    I would prefer to add my own library on top, because I'm sure that my client will at some point update the Slider and lose any additional code I write. That said, I'm not opposed to the idea. – Reverend2100 Jul 25 '17 at 12:36
  • you clould add a event listener for keys and dispatch a mouse wheel event using `element.dispatchEvent()` https://developer.mozilla.org/de/docs/Web/API/EventTarget/dispatchEvent – Bellian Jul 25 '17 at 12:40

3 Answers3

2

You could try to trigger the mousewheel event on the gallery element by code using something like this:

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

msanford
  • 11,803
  • 11
  • 66
  • 93
Bellian
  • 2,009
  • 14
  • 20
0

You can try something like this. This is not an actual solution but an approach.

$('#someContainer').scroll(function(){
       $( "#target" ).keydown();
    })
L0k3Swar
  • 11
  • 2
0

You could do something like this:

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
    }
});
Jonas Kuss
  • 13
  • 5