ionic sliding box

---

ion-slide-box

The sliding box is a component containing multi-page containers. Each page can be switched by sliding or dragging:

The effect is as follows:

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

##PropertiesTypeDetailsdelegate-handledoes-continueslide-intervalshow-pagerpager-clickon-slide-changedactive-slide

(optional)	String	The handle uses $ionicSlideBoxDelegate to identify this sliding box.
(optional)	Boolean value	Whether the sliding box slides automatically.
(optional)	Number	How many milliseconds to wait to start sliding (true if continue). The default is 4000.
(optional)	Boolean value	Whether the sliding box page is displayed.
(optional)	Expression	When the page is clicked, this expression is triggered (if shou-pager is true). Pass an 'index' variable.
(optional)	Expression	This expression is triggered when sliding. Pass an 'index' variable.
(optional)	Expression	Bind the model to the current sliding box.

---

Example

HTML code

<ion-slide-box active-slide="myActiveSlide">
	<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>

CSS code

.slider {
  height: 100%;
}
.slider-slide {
  padding-top: 80px;
  color: #000;
  background-color: #fff;
  text-align: center;

  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
  font-weight: 300;
}

.blue {
  background-color: blue;
}

.yellow {
  background-color: yellow;
}

.pink {
  background-color: pink;
}

JavaScript code

angular.module('ionicApp', ['ionic'])

.controller('SlideController', function($scope) {
  
  $scope.myActiveSlide = 1;
  
})