Disable keyboard navigation in carousel (Swiper) aka How to pass custom option on init SwiperJS

How To
1

By scrolling the images with the arrows on the keyboard, it moves the images of all the carousels on the page (there are several).
To avoid this, I tried disabling image advancement with the keyboard arrows, with the following

document.addEventListener('DOMContentLoaded', (event) => {
    const updateNoKeyboard = () => {
        for( const swiperId in window.bricksData.swiperInstances ) {
            const swiperInstance = window.bricksData.swiperInstances[swiperId]
            if ( swiperInstance ) {
                swiperInstance.keyboard = {enabled: false }
            }
        }
    }
    setTimeout(updateNoKeyboard, 250)
})

But this does not work. Option is updated correctly, but the slider is already instantiated, so it has no effect. I would need to set custom options that are used during initialization.

Example: https://stg-fabbritendeit-fabbri2024.kinsta.cloud/prodotti/

2

Solved by destroying and re-init swiper.

document.addEventListener('DOMContentLoaded', (event) => {
    const updateNoKeyboard = () => {
        for( const swiperId in window.bricksData.swiperInstances ) {
            const swiperInstance = window.bricksData.swiperInstances[swiperId]
            if ( swiperInstance ) {
                const p = swiperInstance.params;
                p.keyboard = { enabled: false };
                swiperInstance.destroy();
                const swiper = new Swiper('#brxe-' + swiperId, p);
            }
        }
    }
    setTimeout(updateNoKeyboard, 250)
})
1 Like