Ion-slides: Programmatically set and animate to a specific slide?

Ionic Framework ionic-v3
1

Hey guys, I’m wondering if there is a way to programmatically set and animate to a specific slide using the ion-slides component?

1 Like
3

Sorry I did originally reply to this before realising you were asking in relation to Ionic 2! So I am now wondering the same.

The demo source here : http://ionicframework.com/docs/v2/api/components/slides/Slides/ shows how to define an ion-slides container via the HTML template, how do I programatically reference said ion-slides container? Can I use something similar to ng-model (#mySlides) ?

5

Having spoken with Mike and rajkiran on Slack, here’s a fully working version!

page1.ts

import {Page, IonicApp, Slides} from 'ionic-angular';
import {ViewChild} from 'angular2/core';


@Page({
	template: `
  <ion-navbar *navbar>
  <ion-title>Tab 1</ion-title>
  <ion-buttons>
  	<button (click)="goto(2)">Slide 2</button>
  </ion-buttons>
</ion-navbar>

<ion-content padding class="page1">
  <ion-slides [options]="options" #slides>
    <ion-slide>
      <img src="http://cache.marriott.com/propertyimages/p/phldt/phototour/phldt_phototour68.jpg?Log=1" alt="">
    </ion-slide>
    <ion-slide>
      <img src="https://newevolutiondesigns.com/images/freebies/philadelphia-downtown.jpg" alt="">
    </ion-slide>
    <ion-slide>
      <img src="http://www.sailtraining.org/events/conference/images/SheratonPhiladelphiaSocietyHillHotelLobby.jpg" alt="">
    </ion-slide>
  </ion-slides>

</ion-content>

  `
})
export class Page1 {
	public options: any = {
        onInit: (slides: any) => { this.swiper = slides; }
    };
    swiper: any;
	
	constructor() {
	}
	goto(slideNumber) {
		this.swiper.slideTo(slideNumber, 2000);
	}
}
6

I’m wondering a similar thing as i tried something like this a little while ago and it did not work

<ion-slider options="{autoplay: 1000}"></ion-slider
7

Thanks for the tip, this works great!