disabledClass for Navigation Never Applied

[EvilJordan]

This is a:

• [x] bug

• [ ] enhancement

• [ ] feature-discussion (RFC)

• Swiper Version: 5.4.5

• Platform/Target and Browser Versions: All

• https://jsfiddle.net/snf2g34h/1/

What you did

Attempting to initialize with allowSlideNext or allowSlidePrev works, but does not apply the disabledClass to the button.

Expected Behavior

Navigation button is initialized with the swiper-button-disabled and aria-disabled="true"

Actual Behavior

Navigation button looks enabled, but actually isn't.

[EvilJordan]

It also appears calling mySwiper.allowSlideNext = false; does not apply the disabledClass, nor does calling mySwiper.navigation.update(); or mySwiper.updateSlidesClasses(); post boolean setting.

[EvilJordan]

I have temporarily solved for this by moving the init function outside the initializer, then applying a class change directly to the navigation element, and setting ariaDisabled directly:

var mySwiper = new Swiper ('.swiper-container', {
    init: false,
    allowSlideNext: false,
    navigation: {
      nextEl: '.swiper-button-next'
    }
});
mySwiper.on('init', function() {
    this.navigation.nextEl.classList.add('swiper-button-disabled');
    this.navigation.nextEl.ariaDisabled = true;
});
mySwiper.init();

The side effect is when enabling the nextEl, one must manually set ariaDisabled = false;:

mySwiper.allowSlideNext = true;
mySwiper.navigation.nextEl.ariaDisabled = false;
mySwiper.navigation.update();

[gaisinskii]

@EvilJordan have you tried to wrap your swiper initialization into requestAnimationFrame ? I have a similar problem, on initial page load swiper-button-disabled class is not being added, but i am using VueJS. I have done something like this:

requestAnimationFrame(() => {
      const swiperInstance = new SwiperInstance('.swiper-container', settingsObject)
    })

[vltansky]

updated demo: https://jsfiddle.net/xgLa76q8/

[dangelion]

Anyone solved this?

[nolimits4web]

Issue is closed because of outdated/irrelevant/not actual/needed more information/inactivity.

If this issue is still actual and reproducible for latest version of Swiper, please create new issue and fill the issue template correctly:

• Clearly describe the issue including steps to reproduce when it is a bug.
• Make sure you fill in the earliest version that you know has the issue.
• Provide live link or JSFiddle/Codepen or website with issue