View Source   Improve this doc

ion-slide-pager
Child of ionSlideBox

Shows a pager for the slidebox.

A pager is a row of small buttons at the bottom of the slidebox, each representing one slide. When the user clicks a pager, that slide will be selected.

For more complete examples, see ionSlideBox.

Usage

This will show four pager buttons, one for each slide.

<ion-slide-box>
  <ion-slide-pager></ion-slide-pager>
  <ion-slide>1</ion-slide>
  <ion-slide>2</ion-slide>
  <ion-slide>3</ion-slide>
  <ion-slide>4</ion-slide>
</ion-slide-box>

If you provide your own ng-click attribute, it overrides the default click behavior.

<ion-slide-box>
  <ion-slide-pager ng-click="doSomething($slideIndex)"></ion-slide-pager>
  <ion-slide>1</ion-slide>
  <ion-slide>2</ion-slide>
  <ion-slide>3</ion-slide>
</ion-slide-box>

API

Attr Type Details
ng-click
(optional)
 expression

By default, clicking a pager will select the corresponding slide. You can override this by providing an ng-click expression. The ng-click expression will be provided a $slideIndex variable, signifying the slide index matching the click.