'swiper-button-disabled' class is not applied after initial render

[AndrewBogdanovTSS]

This is a (multiple allowed):

• bug

• enhancement

• feature-discussion (RFC)

• Swiper Version: 6.4.1

• Platform/Target and Browser Versions: All.

• Live Link or JSFiddle/Codepen or website with isssue: https://codesandbox.io/s/nuxt-swiper-qlvlg?file=/components/Swiper.vue

What you did

Created a swiper with items inside of it. Issue can be reproduced on default settings as well as with slidesPerView: 'auto'. Option watchOverflow is set to true

Expected Behavior

'swiper-button-disabled' should apply to navigation buttons right after initial render of the swiper if the number of slides is smaller than container width

Actual Behavior

'swiper-button-disabled' is not applied after initial render

[vltansky]

@AndrewBogdanovTSS maybe #3627 related?

[AndrewBogdanovTSS]

@vltansky yes, it may be related

[nolimits4web]

Would be good to see some minimal isolated example, as I can't replicate it with Swiper-Vue or with Swiper-Core

[AndrewBogdanovTSS]

@nolimits4web the workaround that worked for me was to update navigation after a delay in nextTick like so:

mounted() {
    this.$nextTick(() => {
        setTimeout(() => this.slider.navigation.update(), 0)
    }
}

so it may be related to the fact that swiper items are passed as a slot content and the moment swiper is trying to calculate it's width items aren't yet fully rendered, but that's just a guess. I don't know if I would be able to provide something more isolated than https://codesandbox.io/s/nuxt-swiper-qlvlg?file=/components/Swiper.vue in the near days. Maybe a bit later when I'll be a bit more free

[adinvadim]

I have the same problem with slidesPerView: 'auto' and watchOverflow: true. Workaround didnt help