swiper

swiper copied to clipboard

This is a (multiple allowed):

• [x] 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

@AndrewBogdanovTSS maybe #3627 related?

@vltansky yes, it may be related

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

@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

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

Same problem here. Anyone solved?

My workaround is to use navigation.update() method on afterInit event:

on: {
  afterInit: () => {
   this.navigation.update()
  }
}

However logs will say this.navigation undefined but it works.

Edit: nvm, any undefined variable under afterInit() will make it work.

These workarounds don't work, is this a recognized bug that will be solved? In that case I could temporary live with it...

Still experiencing the issue. My workaround for now:

on: {
        afterInit: () => {
          this.slideTo(0); 
      },
}

Still experiencing the issue. My workaround for now:

on: {
        afterInit: () => {
          this.slideTo(0); 
      },
}

this helped, Thank you.

can i work on this?

I used nuxt-swiper https://nuxt.com/modules/swiper https://github.com/cpreston321/nuxt-swiper

import type { NavigationOptions } from 'swiper/types';

const navigationOption: Ref<NavigationOptions> = ref({
  prevEl: sliderPrevButton,
  nextEl: sliderNextButton,
  disabledClass: 'nav__back--disabled',
});

Can you help for with? How used with solution?

on: {
        afterInit: () => {
          this.slideTo(0); 
      },
}

Still experiencing the issue. My workaround for now:

on: {
        afterInit: () => {
          this.slideTo(0); 
      },
}

I used nuxt-swiper https://nuxt.com/modules/swiper https://github.com/cpreston321/nuxt-swiper

import type { NavigationOptions } from 'swiper/types';

const navigationOption: Ref<NavigationOptions> = ref({
  prevEl: sliderPrevButton,
  nextEl: sliderNextButton,
  disabledClass: 'nav__back--disabled',
});

Can you help for with? How used with solution?

on: {
        afterInit: () => {
          this.slideTo(0); 
      },
}

You can use that:

<Swiper
....
@afterInit="yourFunc" 
...
>

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