Need help upgrading to Ionic Framework 4.0? Get assistance with our Enterprise Migration Services EXPLORE NOW

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.

Param Type Details
shouldEnableKeyboard boolean

If set to true the slider can be controled by a keyboard.

getActiveIndex()

Get the index of the active slide.

Returns: number

The index number of the current slide.

getPreviousIndex()

Get the index of the previous slide.

Returns: number

The index number of the previous slide.

isBeginning()

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

Returns: boolean

If the slide is the first slide or not.

isEnd()

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

Returns: boolean

If the slide is the last slide or not.

length()

Get the total number of slides.

Returns: number

The total number of slides.

lockSwipeToNext(shouldLockSwipeToNext)

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

Param Type Details
shouldLockSwipeToNext boolean

If set to true the user will not be able to swipe to the next slide. Set to false to unlock this behaviour.

lockSwipeToPrev(shouldLockSwipeToPrev)

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

Param Type Details
shouldLockSwipeToPrev boolean

If set to true the user will not be able to swipe to the previous slide. Set to false to unlock this behaviour.

lockSwipes(shouldLockSwipes)

Lock or unlock the ability to slide to change slides.

Param Type Details
shouldLockSwipes boolean

If set to true user can not swipe in either direction on slide. False allows swiping in both directions.

resize()

slideNext(speed, runCallbacks)

Transition to the next slide.

Param Type Details
speed number

Transition duration (in ms).Optional

runCallbacks boolean

Whether or not to emit the ionSlideWillChange/ionSlideDidChange events. Default true.Optional

slidePrev(speed, runCallbacks)

Transition to the previous slide.

Param Type Details
speed number

Transition duration (in ms).Optional

runCallbacks boolean

Whether or not to emit the ionSlideWillChange/ionSlideDidChange events. Default true.Optional

slideTo(index, speed, runCallbacks)

Transition to the specified slide.

Param Type Details
index number

The index number of the slide.

speed number

Transition duration (in ms).Optional

runCallbacks boolean

Whether or not to emit the ionSlideWillChange/ionSlideDidChange events. Default true.Optional

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

Attr Type Details
autoplay number

Delay between transitions (in milliseconds). If this parameter is not passed, autoplay is disabled. Default does not have a value and does not autoplay. Default: null.

centeredSlides boolean

Center a slide in the middle of the screen.

control Slides

Pass another Slides instance or array of Slides instances that should be controlled by this Slides instance. Default: null.

dir string

If dir attribute is equal to rtl, set interal _rtl to true;

direction string

Swipe direction: 'horizontal' or 'vertical'. Default: horizontal.

effect string

The animation effect of the slides. Possible values are: slide, fade, cube, coverflow or flip. Default: slide.

initialSlide number

Index number of initial slide. Default: 0.

loop boolean

If true, continuously loop from the last slide to the first slide.

pager boolean

If true, show the pager.

paginationType string

Type of pagination. Possible values are: bullets, fraction, progress. Default: bullets. (Note that the pager will not show unless pager input is set to true).

parallax boolean

If true, allows you to use "parallaxed" elements inside of slider.

slidesPerView number

Slides per view. Slides visible at the same time. Default: 1.

spaceBetween number

Distance between slides in px. Default: 0.

speed number

Duration of transition between slides (in milliseconds). Default: 300.

zoom boolean

If true, enables zooming functionality.

Output Events

Attr Details
ionSlideAutoplay

Emitted when a slide moves.

ionSlideAutoplayStart

Emitted when a autoplay starts.

ionSlideAutoplayStop

Emitted when a autoplay stops.

ionSlideDidChange

Emitted when a slide change ends.

ionSlideDoubleTap

Emitted when the user double taps on the slide's container.

ionSlideDrag

Emitted when a slide moves.

ionSlideNextEnd

Emitted when a slide change ends with the "forward" direction.

ionSlideNextStart

Emitted when a slide change starts with the "forward" direction.

ionSlidePrevEnd

Emitted when a slide change ends with the "backward" direction.

ionSlidePrevStart

Emitted when a slide change starts with the "backward" direction.

ionSlideReachEnd

Emitted when slides reaches its last slide.

ionSlideReachStart

Emitted when slides reaches its beginning (initial position).

ionSlideTap

Emitted when the user taps/clicks on the slide's container.

ionSlideWillChange

Emitted when a slide change starts.

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

API

Native

General