Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

@slide-change does not get fired in the new version 11 #7181

Open
5 of 6 tasks
kiketordera opened this issue Nov 11, 2023 · 7 comments
Open
5 of 6 tasks

@slide-change does not get fired in the new version 11 #7181

kiketordera opened this issue Nov 11, 2023 · 7 comments
Labels

Comments

@kiketordera
Copy link

Check that this is really a bug

  • I confirm

Reproduction link

https://codesandbox.io/p/sandbox/wandering-meadow-vqwwng

Bug description

The function provided in @slide-change does not get executed when the slider is changed to another slide

Steps to reproduce:
Install swipper version 11, create a function to be called on @slideChange and monitor his execution

Code example for .vue file:

<template>
  {{ executed }}
  <swiper-container
    :slides-per-view="3"
    effect="coverflow"
    :centered-slides="true"
    :autoplay="{ delay: 5000 }"
    :navigation="true"
    :pagination="{
      type: 'fraction',
    }"
    @slide-change="onSlideChange"
  >
    <swiper-slide>
      slide 1
    </swiper-slide>
    <swiper-slide>
      slide 2
    </swiper-slide>
    <swiper-slide>
      slide 3
    </swiper-slide>
  </swiper-container>
</template>

<script setup lang="ts">

const executed = ref(false)

function onSlideChange (e: any) {
  executed.value = true
  console.log('exacuted')
}

</script>

Expected Behavior

The function provided in @slide-change should get executed when the slider is changed to another slide

Actual Behavior

The function provided in @slide-change does not get executed when the slider is changed to another slide

Swiper version

11.0.0

Platform/Target and Browser Versions

Chrome latest

Validations

  • Follow our Code of Conduct
  • Read the docs.
  • Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
  • Make sure this is a Swiper issue and not a framework-specific issue

Would you like to open a PR for this bug?

  • I'm willing to open a PR
@yuriystasiv
Copy link

I'm facing the same issue

@GNURub
Copy link
Contributor

GNURub commented Nov 23, 2023

The problem is that the events now have a default prefix (swiper). I have the same problen in angular i have to do (swiperslidechange)="..." or you have to set the option {eventPrefix: ""}

@kiketordera
Copy link
Author

Exactly, that made the trick @GNURub thanks! Maybe the examples in the documentation needs to be updated?

@Tanish2001
Copy link

Tanish2001 commented Nov 24, 2023

In my case slideChangeTransitionEnd, reachBeginning, afterInit and other events are not getting triggered, Do i need to write them too like this swiperafterInit?

@radhouenchbinou
Copy link

Use swiperslidechange instead of slidechange

@WaqarKhan3
Copy link

I had this issue and wasn't able to figure out the problem since yesterday. Using swiperslidechange instead of slidechange did work. Thanks to @GNURub and @radhouenchbinou

@jgarciax
Copy link

Utilice swiperslidechange en lugar de slidechange

GRAAAANDE, me salvaste

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

7 participants