According to Ionic Documentations Here: https://ionicframework.com/docs/api/slides#methods

A Method Can be Used to slide to any slide index as needed slideTo(Slide Index, Slide Speed is MS)

How can i assign a button to use this method, i've tried $refs with no luck. Here's my current code:

<template>
  <ion-page>
    
    <ion-content>
     <ion-slides :options="slideOpts" pager="true" ref="slides">
        
    <ion-slide> 
    Some Content Here
    <ion-button @click="GoToSlide(1)"</ion-button>
    </ion-slide>
    <ion-slide>
    Slide 2
    </ion-slide>
    <ion-slide>
    Slide 3
    </ion-slide>

</template>
<script>
import { IonPage, IonContent, IonItem, IonLabel, IonInput, IonTextarea, IonIcon, IonDatetime, IonSlides, IonSlide} from '@ionic/vue';
export default  {
    name: 'New Profile',
    components: {IonContent, IonPage, IonItem, IonLabel, IonInput, IonTextarea, IonIcon, IonDatetime, IonSlides, IonSlide},
    data() { 
      return { personCircleOutline, heartCircleOutline, newspaperOutline, medkitOutline }
      },
    methods : {
        GoToSlide(i){
            this.$refs.slides.sideTo(i,1000);
      }
  },
    setup() {
    // Optional parameters to pass to the swiper instance. See http://idangero.us/swiper/api/ for valid options.
    const slideOpts = {
      initialSlide: 0,
      speed: 1400
    }
    return { slideOpts }
  }
  
 
}

Use Ionic Slides Methods on Vue JS

1 Answers