Available in:

Ionic-Angular 0.9.0
Ionic 0.9.0

Slide Box

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

<ion-slide-box>

Attribute Type Default Description
show-pager boolean true Whether to show or hide the pager icons
disable-scroll boolean false Whether to disable scroll in slidebox
does-continue boolean false Whether the slidebox auto-plays, in a slide-show fashion
slide-interval integer 4000 If does-continue is true, sets the interval speed in milliseconds
on-slide-changed function(index) Called when a slide is changed, returns index parameter
active-slide integer 0 Set the default slide number, at index

Ionic-Angular Usage

To use the slide box in your apps, use the following markup:

<ion-slide-box>
  <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>

Actions

Go to slide: The slide index numbers start from 0, 1, 2 …. n.

var gotoSlide = function(index) {
  $scope.$broadcast('slideBox.setSlide', index);
};

Previous slide:

var prevSlide = function() {
  $scope.$broadcast('slideBox.prevSlide');
};

Next slide:

var nextSlide = function() {
  $scope.$broadcast('slideBox.nextSlide');
};