Slides

Improve this doc

The Slides component is a multi-section container. Each section can be swiped or dragged between. It contains any number of Slide components.

Creating

You should use a template to create slides and listen to slide events. The template should contain the slide container, an <ion-slides> element, and any number of Slide components, written as <ion-slide>. Any configuration of the slides should be passed in the options property of the <ion-slides> element. You can listen to events such as the slide changing by placing the event on the <ion-slides> element. See Usage below for more information on creating slides.

Configuring

There are several configuration options that can be passed to Slides. These should be passed in the options property of the <ion-slides> element upon creation. You can allow the slides to loop around from the last to the first, set autoplay on the slides so it will automatically switch between them, and more.

Properties to pass in options:

See Usage below for more information on configuring slides.

Navigating

After creating and configuring the slides, you can navigate between them by swiping or calling methods on the Slides instance. You can call slideTo() to navigate to a specific slide, or slideNext() to change to the slide that follows the active slide. All of the methods provided by the Slides instance are listed below. See Usage below for more information on navigating between slides.

Limitations

The Slides component wraps the Swiper component built by iDangero.us. This means that all of the Swiper API isn't exposed on the Slides component. See the getSlider() method for information on getting the Swiper instance and using its methods directly.

Component

selector: ion-slides

Usage

You can add slides to a @Page using the following template:

<ion-slides>
  <ion-slide>
    <h1>Slide 1</h1>
  </ion-slide>
  <ion-slide>
    <h1>Slide 2</h1>
  </ion-slide>
  <ion-slide>
    <h1>Slide 3</h1>
  </ion-slide>
</ion-slides>

To add options, we will define them in mySlideOptions in our class MyPage:

import {Page, Slides} from 'ionic-angular';

@Page({
  templateUrl: 'my-page.html'
})
class MyPage {
  mySlideOptions = {
    initialSlide: 1,
    loop: true
  };
}

This is setting the second slide as the initial slide on load, since the initialSlide begins at 0. We are also setting loop to true which allows us to swipe from the last slide to the first continuously. Then, we will pass mySlideOptions in the options property of the <ion-slides> element. We are using property binding on options because mySlideOptions is an expression:

<ion-slides [options]="mySlideOptions">

To grab a reference to the Slides, we will add a local template variable to <ion-slides> called mySlider:

<ion-slides #mySlider [options]="mySlideOptions">

Next, we can use ViewChild to assign the Slides instance to slider:

import {ViewChild} from 'angular2/core';

class MyPage {
  @ViewChild('mySlider') slider: Slides;

  ...
}

Now we can call any of the Slider methods), for example we can use the Slider's slideTo() method in order to navigate to a specific slide on a button click. Below we call the goToSlide() method and it navigates to the 3rd slide:

class MyPage {
  ...

  goToSlide() {
    this.slider.slideTo(2, 500);
  }
}

We can also add events to listen to on the <ion-slides> element. Let's add the didChange event and call a method when the slide changes:

<ion-slides #mySlider (didChange)="onSlideChanged()" [options]="mySlideOptions">

In our class, we add the onSlideChanged() method which gets the active index and prints it:

class MyPage {
  ...

  onSlideChanged() {
    let currentIndex = this.slider.getActiveIndex();
    console.log("Current index is", currentIndex);
  }
}

For all of the methods you can call on the Slider instance, see the Instance Members.

Instance Members

slideTo(index, speed, runCallbacks)

Transition to the specified slide.

slideNext(speed, runCallbacks)

Transition to the next slide.

slidePrev(speed, runCallbacks)

Transition to the previous slide.

getActiveIndex()

Get the index of the active slide.

getPreviousIndex()

Get the index of the previous slide.

length()

Get the total number of slides.

isEnd()

Get whether or not the current slide is the last slide.

isBeginning()

Get whether or not the current slide is the first slide.

getSlider()

Get the Swiper instance.

The Slides component wraps the Swiper component built by iDangero.us. See the Swiper API Docs for information on using the Swiper instance directly.

Input Properties

Output Events

Related

Slides Component Docs

Swiper.js: The most modern mobile touch slider and framework with hardware accelerated transitions

http://www.idangero.us/swiper/

Copyright 2015, Vladimir Kharlampidi The iDangero.us http://www.idangero.us/

Licensed under MIT