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.

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';

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);
  }
}

Instance Members

controlBy

controlInverse

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 ionWillChange/ionDidChange events. Default true.Optional

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 ionWillChange/ionDidChange 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 ionWillChange/ionDidChange events. Default true.Optional

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.

length()

Get the total number of slides.

Returns: number

The total number of slides.

isEnd()

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

Returns: boolean

If the slide is the last slide or not.

isBeginning()

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

Returns: boolean

If the slide is the first slide or not.

startAutoplay()

Start auto play.

stopAutoplay()

Stop auto play.

lockSwipeToNext()

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

lockSwipeToPrev()

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

lockSwipes()

Lock or unlock the ability to slide to change slides.

enableKeyboardControl()

Enable or disable keyboard control.

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.

control Slides

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

effect string

Could be slide, fade, cube, coverflow or flip. Default: slide.

direction string

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

initialSlide number

Index number of initial slide. Default: 0.

loop boolean

Whether to continuously loop from the last slide to the first slide. Default: false.

pager boolean

Whether or not to show the pager. Default: false.

paginationType string

String with type of pagination. Can be bullets, fraction, progress. Default: bullets. (Note that the pager will not show unless pager input is set to true).

parallax boolean

Enable, if you want to use "parallaxed" elements inside of slider. Default: false.

speed number

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

zoom boolean

Set to true to enable zooming functionality. Default: false.

spaceBetween number

Distance between slides in px. Default: 0.

slidesPerView number

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

Output Events

Attr Details
ionSlideWillChange

Expression to evaluate when a slide change starts.

ionSlideDidChange

Expression to evaluate when a slide change ends.

ionSlideDrag

Expression to evaluate when a slide moves.

ionSlideReachStart

When slides reach its beginning (initial position).

ionSlideReachEnd

When slides reach its last slide.

ionSlideAutoplay

Expression to evaluate when a slide moves.

ionSlideAutoplayStart

Same as ionSlideWillChange but caused by autoplay.

ionSlideAutoplayStop

Expression to evaluate when a autoplay stops.

ionSlideNextStart

Same as ionSlideWillChange but for "forward" direction only.

ionSlidePrevStart

Same as ionSlideWillChange but for "backward" direction only.

ionSlideNextEnd

Same as ionSlideDidChange but for "forward" direction only.

ionSlidePrevEnd

Same as ionSlideDidChange but for "backward" direction only.

ionSlideTap

When the user taps/clicks on the slide's container.

ionSlideDoubleTap

When the user double taps on the slide's container.

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:

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