View Source   Improve this doc

ion-slides
Delegate: $ionicSlideBoxDelegate

The Slides component is a powerful multi-page container where each page can be swiped or dragged between.

Note: this is a new version of the Ionic Slide Box based on the Swiper widget from idangerous.

SlideBox

Usage

<ion-content scroll="false">
  <ion-slides  options="options" slider="data.slider">
    <ion-slide-page>
      <div class="box blue"><h1>BLUE</h1></div>
    </ion-slide-page>
    <ion-slide-page>
      <div class="box yellow"><h1>YELLOW</h1></div>
    </ion-slide-page>
    <ion-slide-page>
      <div class="box pink"><h1>PINK</h1></div>
    </ion-slide-page>
  </ion-slides>
</ion-content>

$scope.options = {
  loop: false,
  effect: 'fade',
  speed: 500,
}

$scope.$on("$ionicSlides.sliderInitialized", function(event, data){
  // data.slider is the instance of Swiper
  $scope.slider = data.slider;
});

$scope.$on("$ionicSlides.slideChangeStart", function(event, data){
  console.log('Slide change is beginning');
});

$scope.$on("$ionicSlides.slideChangeEnd", function(event, data){
  // note: the indexes are 0-based
  $scope.activeIndex = data.slider.activeIndex;
  $scope.previousIndex = data.slider.previousIndex;
});

Slide Events

The slides component dispatches events when the active slide changes

$ionicSlides.slideChangeStart This event is emitted when a slide change begins
$ionicSlides.slideChangeEnd This event is emitted when a slide change completes
$ionicSlides.sliderInitialized This event is emitted when the slider is initialized. It provides access to an instance of the slider.

Updating Slides Dynamically

When applying data to the slider at runtime, typically everything will work as expected.

In the event that the slides are looped, use the updateLoop method on the slider to ensure the slides update correctly.

$scope.$on("$ionicSlides.sliderInitialized", function(event, data){
  // grab an instance of the slider
  $scope.slider = data.slider;
});

function dataChangeHandler(){
  // call this function when data changes, such as an HTTP request, etc
  if ( $scope.slider ){
    $scope.slider.updateLoop();
  }
}