forked from revolunet/angular-carousel
-
Notifications
You must be signed in to change notification settings - Fork 0
/
test.html
112 lines (103 loc) · 2.89 KB
/
test.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=620, user-scalable=no">
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
<style>
html, body {
height:100%;
padding:0;
margin:0;
}
body {
margin: 0;
background: #333;
color:white;
padding: 0px;
height:100%;
}
* {
font-family: 'Droid Sans', sans-serif;
}
ul li {
list-style-type: none
}
ul.basic {
width:100%;
height:100%;
}
ul.basic li {
text-align:center;
padding-top:80px;
font-size: 22px;
}
.rn-carousel-container {
height:100%;
background:#444;
}
.pageCounter {
color:white;
cursor:pointer;
}
.pageCounter:hover, .pageCounter.active {
color:red;
text-decoration:underline;
}
</style>
</head>
<body ng-app="myApp" ng-controller='demoController'>
<h3>test page
<span ng-repeat="page in pages">
<span> - </span>
<span class="pageCounter" ng-class="{active: (index==$index)}" ng-click="changeSlide($index)" ng-bind="$index"></span>
</span>
</h3>
<ul rn-carousel rn-carousel-buffered rn-carousel-prev="prev(item)" rn-carousel-next="next(item)" class="basic">
<li ng-repeat="page in pages">
<h1 style='font-size:120px' ng-bind="'#' + page.id"></h1>
<h3>carouselCollection.index: {{ carouselCollection.index }}</h3>
<h3>carouselCollection.position: {{ carouselCollection.position }}</h3>
<pre style="font-size:12px;text-wrap:normal;text-align:left" ng-bind="debug"></pre>
</li>
</ul>
<script src="//code.angularjs.org/1.1.5/angular.js"></script>
<!-- <script src="./components/angular/angular.js"></script> -->
<script src="./lib/angular-mobile.js"></script>
<!-- include carousel src -->
<script src="./dist/angular-carousel.js"></script>
<link href='./dist/angular-carousel.min.css' rel='stylesheet' type='text/css'>
<script>
/* demo page code */
angular.module('myApp', ['angular-carousel'])
.controller('demoController', function($scope, $http) {
// add some initial pages
$scope.pages = [{
id:0
}];
$scope.prev = function(item) {
console.log('prev', arguments);
return {
id: item.id - 1
};
}
$scope.next = function(item) {
console.log('next', arguments);
return {
id: item.id + 1
};
}
$scope.changeSlide = function(page) {
$scope.index = page;
}
// var nbPages = 10;
// for (var i=0; i<nbPages; i++) {
// $scope.pages.push({
// id: i
// });
// }
// $scope.index = 3;
});
</script>
</body>
</html>