ionic slide-box(滑动框)

1、参数

2、Html

<ion-header-bar class="bar bar-header bar-light bar-calm">
  <ion-title class="bar-calm">腾讯新闻</ion-title>
  <button class="button button-icon icon ion-navicon"></button>
</ion-header-bar>
<ion-view>
  <ion-slide-box auto-play="true" does-continue="true" slide-interval='2000' active-slide="myActiveSlide">
    <ion-slide>
      <div class="box blue"><h1>BLUE1</h1></div>
    </ion-slide>
    <ion-slide>
      <div class="box yellow"><h1>YELLOW2</h1></div>
    </ion-slide>
    <ion-slide>
      <div class="box pink"><h1>PINK3</h1></div>
    </ion-slide>
  </ion-slide-box>
</ion-view>

3、Css

/* slide 轮播 */
.slider {height: 30%;}
.slide-slide {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;}
.box{ height:100%;} 
.box h1{position:relative; top:50%; transform:translateY(-50%);}

4、Controller

appCntrollers.controller('SlideBoxCtrl', function ($scope) {
    $scope.myActiveSlide = 0;
})