Navigating with arrow keys affects all carousels, not just the carousel in focus

[cewen]

I'm creating a few Glide sliders on the page like so:

import Glide from '@glidejs/glide';

const sliders = document.querySelectorAll('.glide');

sliders.forEach((slider) => {
  new Glide(slider).mount();
});

The sliders all work perfectly well independently, but when I try to focus on one and navigate with the keyboard, all of the sliders are affected and change to either the next or previous slide.

Pressing the arrow keys should only affect the slider that the user is focused into.

From inspecting the source code it looks like this may be because Glide is attaching a keyup listener on the document element, rather on each individual .glide element.

[cylott]

I'd also love to know a fix for this one!

[ghost]

Disable keyboard events globally for Glide and then attach specific events when you mount the individual sliders.

import Glide from '@glidejs/glide';

const sliders = document.querySelectorAll('.glide');

let sliderObj = {};

sliders.forEach((slider, i) => {
    // Add glide to the object for reference, disable global keyboard
    sliderObj[i] = new Glide(slider, {
        type: 'carousel',
        keyboard: false
    });
    // Attatch event listener and instruct slide to go left and right
    slider.addEventListener('keyup', (e) => {
        if (e.keyCode == 39) this.sliderObj[i].go('>');
        if (e.keyCode == 37) this.sliderObj[i].go('<');
    });
    // Mount
    sliderObj[i].mount();
});

[cylott]

@shane-sigma thanks for this code. It took me forever to figure out that the div doesn't get focus until you click on it. This works very well. For users wanting the focus to happen on hover, try this:

$('mydiv').hover(function () {this.focus({preventScroll: true}); });
$('mydiv').keyup(function (e) {
	if (e.keyCode == 39)= mydiv.go('>');
	if (e.keyCode == 37) mydiv.go('<');
	});

[poveu]

However this is still a workaround, not a fix.

[cylott]

However this is still a workaround, not a fix.

A good workaround

[poveu]

However this is still a workaround, not a fix.

A good workaround

Haha I'm not saying it's not! :P Just pointing out that this should be fixed in future releases.

[tannermann]

Still having this issue in April 2021. The glide carousel will move regardless of where hover or focus is on the page if the arrow keys are pressed. It is conflicting with my Bootstrap 4 carousel on the same page.

[Ceyar]

Mmmh, using keyup eventListener will let me use keyboard. I have to click on the carousel to get he keyboard enabled.

Did someone had the same problem and fixed it?

Thanks