buttons are not clickable in swiper slider

When working with the Swiper slider, users often encounter issues clicking buttons or links inside the slide items due to the inert attribute, which is automatically added to the slides. This attribute restricts user interaction, preventing clicks on buttons or links. To address this, we need to remove the inert attribute from the slides to restore clickability.

Code Example

This example code demonstrates how the inert attribute is applied to Swiper slider slides. If you notice the inert attribute in your Swiper slider slides, you’ll need to remove it. simply add the following jQuery function to your site header/footer/specific plugin:

solution

This jQuery function is designed to manage the inert attribute on slides within a carousel. Here’s a breakdown of its functionality:

jQuery(document).ready(function($) {
    function removeInertFromSlides() {
        $('.e-n-carousel .swiper-slide[inert]').removeAttr('inert');
    } 
    removeInertFromSlides(); 
    setInterval(removeInertFromSlides, 500); 
});

1- Initialization:

The function executes when the document is fully loaded, ensuring that all elements are available for manipulation.

2- removeInertFromSlides:

This inner function targets all .swiper-slide elements within the .e-n-carousel that have the inert attribute and removes it. The inert attribute is typically used to prevent user interaction, making elements inactive.

3- Initial Call:

The function is invoked immediately after definition to remove the inert attribute from any slides that may have it when the page loads.

4- Periodic Execution:

Using setInterval, the removeInertFromSlides function is called every 500 milliseconds (or another specified interval). This ensures that any slides that might receive the inert attribute dynamically will have it removed promptly.

Overall, this script ensures that users can interact with all slides in the carousel by continually removing the inert attribute, thereby enhancing the user experience.