angular.module('ionicApp', ['ionic'])
.controller('MyCtrl', function($scope, $timeout) {
$scope.items = ["item1"];
$timeout(function() {
$scope.items.push("item2")
}, 1000);
$scope.options = {
onInit: function(swiper) {
$scope.slider = swiper;
},
loop: false,
effect: 'coverflow',
centeredSlides: true,
slidesPerView: 'auto',
coverflow: {
rotate: 50,
stretch: 0,
depth: 100,
modifier: 1,
slideShadows: true
},
pagination: false,
speed: 400
};
});
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Slides</title>
<link href="http://code.ionicframework.com/1.3.3/css/ionic.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.3.3/js/ionic.bundle.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MyCtrl">
<ion-content style="background: grey;">
<div style="margin-top: 10%;bottom: 15%;height: 80%;">
<ion-slides options="options" slider="data.slider" style="border-radius: 10px;">
<ion-slide-page ng-repeat="item in items" style="border-radius: 10px;width:80%; background-color: #fff;">
{{item}}
</ion-slide-page>
</ion-slides>
</div>
</ion-content>
</body>
</html>
body {
cursor: url('http://ionicframework.com/img/finger.png'), auto;
}
ion-slide{
background-color: black;
color: white;
}