Based on the Ionic Framework documentation found here, a method can be used to slide to any desired slide index using the following syntax:
slideTo(Slide Index, Slide Speed in MS)I am having trouble assigning a button to use this method. I have attempted using $refs without success. Below is 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 }
}
}