Ionic JS 18: Slide Box

Ion-slide-box
A slide box is a component that contains a multi-page container, with each page sliding or dragging toggle:
As follows:

?

?

Usage

<Ion-slide-boxon-slide-changed= "slidehaschanged ($index)">  <Ion-slide>    <Divclass= "Box Blue"><H1>BLUE</H1></Div>  </Ion-slide>  <Ion-slide>    <Divclass= "Box Yellow"><H1>YELLOW</H1></Div>  </Ion-slide>  <Ion-slide>    <Divclass= "Box Pink"><H1>PINK</H1></Div>  </Ion-slide></Ion-slide-box>

?

HTML Code

<Ion-slide-boxActive-slide= "Myactiveslide">    <Ion-slide>      <Divclass= "Box Blue"><H1>BLUE</H1></Div>    </Ion-slide>    <Ion-slide>      <Divclass= "Box Yellow"><H1>YELLOW</H1></Div>    </Ion-slide>    <Ion-slide>      <Divclass= "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: -;}. Blue{Background-color:Blue;}. Yellow{Background-color:Yellow;}. Pink{Background-color:Pink;}

JavaScript Code

Angular.module (' Ionicapp ', [' Ionic ']). Controller (function($scope) {    = 1;  })

?

?

Ionic JS 18: Slide Box