Slides

ion-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>. Basic configuration values can be set as input properties, which are listed below. Slides events can also be listened to such as the slide changing by placing the event on the <ion-slides> element. See Usage below for more information.

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.

Usage

You can add slides to a @Component 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>

Next, we can use ViewChild to assign the Slides instance to your slides property. Now we can call any of the Slides methods, for example we can use the Slide'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:

import { ViewChild } from '@angular/core';
import { Slides } from 'ionic-angular';

class MyPage {
  @ViewChild(Slides) slides: Slides;

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

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

<ion-slides (ionSlideDidChange)="slideChanged()">

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

class MyPage {
  ...

  slideChanged() {
    let currentIndex = this.slides.getActiveIndex();
    console.log('Current index is', currentIndex);
  }
}

Zooming

If your slides contain images, you can enable zooming on them by setting zoom="true" and wrapping each image in adivwith the classswiper-zoom-container. Zoom supportsimg,svg,canvas, andion-img`.

<ion-slides zoom="true">
  <ion-slide>
    <div class="swiper-zoom-container">
      <img src="assets/img/dog.jpg">
    </div>
    <ion-label>Woof</ion-label>
  </ion-slide>
  <ion-slide>
    <div class="swiper-zoom-container">
      <img src="assets/img/cat.jpg">
    </div>
    <ion-label>Meow</ion-label>
  </ion-slide>
  <ion-slide>
    <div class="swiper-zoom-container">
      <img src="assets/img/fish.jpg">
    </div>
    <ion-label>Just keep swimming</ion-label>
  </ion-slide>
</ion-slides>

Instance Members

controlBy

controlInverse

enableKeyboardControl(shouldEnableKeyboard)

Enable or disable keyboard control.

getActiveIndex()

Get the index of the active slide.

getPreviousIndex()

Get the index of the previous slide.

isBeginning()

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

isEnd()

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

length()

Get the total number of slides.

lockSwipeToNext(shouldLockSwipeToNext)

Lock or unlock the ability to slide to the next slides.

lockSwipeToPrev(shouldLockSwipeToPrev)

Lock or unlock the ability to slide to the previous slides.

lockSwipes(shouldLockSwipes)

Lock or unlock the ability to slide to change slides.

resize()

slideNext(speed, runCallbacks)

Transition to the next slide.

slidePrev(speed, runCallbacks)

Transition to the previous slide.

slideTo(index, speed, runCallbacks)

Transition to the specified slide.

startAutoplay()

Start auto play.

stopAutoplay()

Stop auto play.

update()

Update the underlying slider implementation. Call this if you’ve added or removed child slides.

Input Properties

Output Events

Advanced

There are several options available to create customized slides. Ionic exposes the most commonly used options as inputs. In order to use an option that isn't exposed as an input the following code should be used, where freeMode is the option to change:

import { ViewChild } from '@angular/core';
import { Slides } from 'ionic-angular';

class MyPage {
  @ViewChild(Slides) slides: Slides;

  ngAfterViewInit() {
    this.slides.freeMode = true;
  }
}

To see all of the available options, take a look at the source for slides.

Related

Slides Component Docs

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

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

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

Licensed under MIT