View Source   Improve this doc

ion-slide-box
Delegate: $ionicSlideBoxDelegate

See the Pen by Ionic (@ionic) on CodePen.

The Slide Box is a multi-page container where each page can be swiped or dragged between:

Deprecated API

will be removed in the next Ionic release in favor of the new ion-slides component. Don't depend on the internal behavior of this widget.

Usage

<ion-slide-box on-slide-changed="slideHasChanged($index)">
  <ion-slide>
    <div class="box blue"><h1>BLUE</h1></div>
  </ion-slide>
  <ion-slide>
    <div class="box yellow"><h1>YELLOW</h1></div>
  </ion-slide>
  <ion-slide>
    <div class="box pink"><h1>PINK</h1></div>
  </ion-slide>
</ion-slide-box>

API

Attr Type Details
delegate-handle
(optional)
 string

The handle used to identify this slideBox with $ionicSlideBoxDelegate.
does-continue
(optional)
 boolean

Whether the slide box should loop.
auto-play
(optional)
 boolean

Whether the slide box should automatically slide. Default true if does-continue is true.
slide-interval
(optional)
 number

How many milliseconds to wait to change slides (if does-continue is true). Defaults to 4000.
show-pager
(optional)
 boolean

Whether a pager should be shown for this slide box. Accepts expressions via show-pager="". Defaults to true.
pager-click
(optional)
 expression

Expression to call when a pager is clicked (if show-pager is true). Is passed the 'index' variable.
on-slide-changed
(optional)
 expression

Expression called whenever the slide is changed. Is passed an '$index' variable.
active-slide
(optional)
 expression

Model to bind the current slide index to.