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;
})