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

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.

[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();
});

[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