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.