Newby: How do you use slider events e.g. ionSlideTransitionStart in Ionic Vue?

Ionic Framework Ionic Vue
1

Hello,

Please forgive the very high level question, but I’m new to Ionic/Vue and trying to learn from the start but I’m struggling to find practical usage examples. What I’d like to do is console.log the index of the current slide, after the slides component is transitioned. I see a list of events in the documentation, one of which is ionSlideTransitionEnd so that’s the one I wanna use. I can’t find any example of actually how to use this.

The minimal vue component file looks like this:

<template>
  <ion-page>
    <ion-content :fullscreen="true">
      <ion-slides :options="slideOpts">
        <ion-slide>
          <p>Slide 1</p>
        </ion-slide>
        <ion-slide>
          <p>Slide 1</p>
        </ion-slide>
        <ion-slide>
          <p>Slide 1</p>
        </ion-slide>
      </ion-slides>
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import { IonPage, IonContent, IonSlides, IonSlide } from '@ionic/vue'

export default {
  name: 'Slider',
  components: { IonPage, IonContent, IonSlides, IonSlide },
  setup() {
    const slideOpts = {
      autoplay: {
        delay: 5000,
      },
      initialSlide: 0,
      loop: true
    }
    return { slideOpts }
  }
}
</script>

Do I bind the ionSlideTransitionStart event to the component to call a custom method like this?

<ion-slides :options="slideOpts" @ionSlideTransitionStart="slideChange">

Then in the script block, do this:

setup() {
    const slideOpts = {
      autoplay: {
        delay: 5000,
      },
      initialSlide: 0,
      loop: true
    }
    return { slideOpts }
  },
  methods: {
      slideChange() {
        console.log('Do something here to get the current slide?')
      }
  },

Or do I do something using refs (I saw a related tutorial here doing something along these lines https://dev.to/aaronksaunders/video-series-sample-ionslides-app-using-vue-3-in-ionic-framework-4lp2) and use a custom function inside setup() rather than using methods? If I do the former it works - it logs to the console but I’ve no idea if that’s the best way and if so how to get the actual current slide index.

If anyone could point me in the right direction here that would be awesome, thankyou.

2

According to this post’s answer, it works if you use ionSlideDidChange like so

      <ion-slides @ionSlideDidChange="ionSlideDidChange">
        <ion-slide>
          <p>Slide 1</p>
        </ion-slide>
        <ion-slide>
          <p>Slide 1</p>
        </ion-slide>
        <ion-slide>
          <p>Slide 1</p>
        </ion-slide>
      </ion-slides>

Methods

  methods: {
    ionSlideDidChange({ target }) {
      target.getActiveIndex().then(i => {
        console.log(i) // slide index
      });
    }
  },
2 Likes