Skip to content
This repository was archived by the owner on May 10, 2018. It is now read-only.

Commit a223c24

Browse files
revolunetrevolunet
committed
docs: add some more demos
1 parent b7d8f45 commit a223c24

File tree

3 files changed

+193
-88
lines changed

3 files changed

+193
-88
lines changed

‎TODO‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ Carousel v2:
2121
Bugs:
2222
✔ bug when rn-carousel-index change while animation from outside @done (14-01-05 02:19)
2323
☐ handle touch cancel
24+
✔ initial index position not respected @done (14-01-07 23:51)
2425
Advanced:
2526
☐ optional cycle
2627
☐ infinite carousels with slide generators

‎demo/demo.css‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
html, body {
2+
height:100%;
3+
padding:0;
4+
margin:0;
5+
}
6+
body {
7+
margin: 0;
8+
background: #333;
9+
color:white;
10+
padding: 10px;
11+
}
12+
a {
13+
color:white;
14+
}
15+
* {
16+
font-family: 'Droid Sans', sans-serif;
17+
}
18+
h1 {
19+
margin-top: 5px;
20+
}
21+
h3 {
22+
font-size:30px;
23+
margin: 30px 0 10px 0;
24+
}
25+
.my-slider {
26+
width: 450px;
27+
height: 300px;
28+
font-size:0;
29+
}
30+
.my-slider li {
31+
box-sizing: border-box;
32+
font-size:30px;
33+
position:relative;
34+
}
35+
.my-slider li div.debug {
36+
box-sizing: border-box;
37+
position:absolute;
38+
bottom:0;
39+
height:50px;
40+
background:rgba(0,0,0,0.7);
41+
color:white;
42+
font-size:12px;
43+
width:100%;
44+
padding:5px;
45+
}
46+
.my-slider.standard li {
47+
text-align:center;
48+
padding:20px;
49+
font-size:20px;
50+
}
51+
.big {
52+
margin-top:30px;
53+
width:100%;
54+
font-size:30px;
55+
}
56+
.controls {
57+
margin-top:-15px;
58+
width:450px;
59+
text-align: center;
60+
}
61+
.ng-cloak {
62+
display:none;
63+
}
64+
.center {
65+
text-align:center;
66+
}
67+
.thumbs {
68+
width:450px;
69+
text-align:center;
70+
}
71+
.thumb {
72+
display: inline-block;
73+
background-size:cover;
74+
border:1px solid transparent;
75+
margin:2px 4px;
76+
width:60px;
77+
height:40px;
78+
transition: border 0.2s ease-in;
79+
}
80+
.is-active {
81+
border:1px solid red;
82+
}
83+
.details {
84+
color:white;
85+
font-size:12px;
86+
margin-bottom:10px;
87+
}
88+
.button{
89+
display: inline-block;
90+
text-decoration: none;
91+
font: bold 12px/12px HelveticaNeue, Arial;
92+
padding: 8px 11px;
93+
color: #555;
94+
border: 1px solid #dedede;
95+
-webkit-border-radius: 3px;
96+
-moz-border-radius: 3px;
97+
border-radius: 3px;
98+
cursor:pointer;
99+
}
100+
.button:disabled {
101+
cursor: default !important;
102+
color: #aaa !important;
103+
}
104+
.button.grey{
105+
background: #bdbdbd;
106+
background: -webkit-gradient(linear, left top, left bottom, from(#cacaca), to(#aeaeae)); /* WebKit */
107+
background: -moz-linear-gradient(top, #cacaca, #aeaeae);
108+
border-color: #b5b5b5 #a1a1a1 #8f8f8f;
109+
color: #555;
110+
text-shadow: 0 1px 0 #d4d4d4;
111+
}
112+
.button.grey:hover{
113+
background: #c2c2c2;
114+
background: -webkit-gradient(linear, left top, left bottom, from(#bcbcbc), to(#c2c2c2)); /* WebKit */
115+
background: -moz-linear-gradient(top, #bcbcbc, #c2c2c2);
116+
border-color: #989898 #8e8e8e #878787;
117+
text-shadow: 0 1px 0 #dadada;
118+
}

‎index.html‎

Lines changed: 74 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,78 +1,13 @@
11
<!DOCTYPE html>
22
<html ng-app="DemoApp">
3-
<head>
4-
<meta charset="UTF-8">
5-
<title>angular-carousel demo</title>
6-
<meta name="viewport" content="width=620, user-scalable=no">
7-
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
8-
<link href='./dist/angular-carousel.css' rel='stylesheet' type='text/css'>
9-
<style>
10-
html, body {
11-
height:100%;
12-
padding:0;
13-
margin:0;
14-
}
15-
body {
16-
margin: 0;
17-
background: #333;
18-
color:white;
19-
padding: 10px;
20-
}
21-
a {
22-
color:white;
23-
}
24-
* {
25-
font-family: 'Droid Sans', sans-serif;
26-
}
27-
h1 {
28-
margin-top: 5px;
29-
}
30-
h3 {
31-
margin: 30px 0 10px 0;
32-
}
33-
.my-slider {
34-
width: 320px;
35-
height: 200px;
36-
font-size:0;
37-
}
38-
.my-slider li {
39-
box-sizing: border-box;
40-
font-size:30px;
41-
position:relative;
42-
}
43-
.my-slider li div.debug {
44-
box-sizing: border-box;
45-
position:absolute;
46-
bottom:0;
47-
height:50px;
48-
background:rgba(0,0,0,0.7);
49-
color:white;
50-
font-size:12px;
51-
width:100%;
52-
padding:5px;
53-
}
54-
.my-slider.standard li {
55-
text-align:center;
56-
padding:20px;
57-
font-size:20px;
58-
}
59-
.big {
60-
margin-top:30px;
61-
width:100%;
62-
font-size:30px;
63-
}
64-
.controls {
65-
width:320px;
66-
text-align: center;
67-
}
68-
.ng-cloak {
69-
display:none;
70-
}
71-
.center {
72-
text-align:center;
73-
}
74-
75-
</style>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>angular-carousel demo</title>
6+
<meta name="viewport" content="width=620, user-scalable=no">
7+
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
8+
<link href='./dist/angular-carousel.css' rel='stylesheet' type='text/css'>
9+
<link href='./demo/demo.css' rel='stylesheet' type='text/css'>
10+
</head>
7611
<body ng-controller="DemoCtrl">
7712
<a href="https://github.com/revolunet/angular-carousel"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
7813

@@ -81,10 +16,14 @@ <h1>AngularJS Touch Carousel</h1>
8116
Transform your ng-repeat or DOM nodes in a mobile-friendly carousel just by adding a 'rn-carousel' attribute to your HTML; AngularJS directives FTW :)<br><br>
8217
Carousels are data-bound to your ngRepeat collections and can be DOM buffered (good for performance)
8318
<br><br>
84-
Swipe these demos with your mouse or finger :
19+
Swipe these demos with your mouse or finger
8520
</div>
8621

8722
<h3>ngRepeat demo (buffered carousel)</h3>
23+
<div class="details">A simple buffered ng-repeat with a custom template.
24+
<br>
25+
Swipe 50 slides with only 5 slides in the DOM
26+
</div>
8827
<ul rn-carousel rn-carousel-buffered class="my-slider ng-cloak">
8928
<li ng-repeat="slide in slides|filter:{odd:true}:true track by slide.label" ng-style="{'background-image': 'url(' + slide.img + ')'}">
9029
<div class="debug">
@@ -97,6 +36,10 @@ <h3>ngRepeat demo (buffered carousel)</h3>
9736
</ul>
9837

9938
<h3>template-based demo</h3>
39+
<div class="details">Various blocks automagically converted to a carousel.
40+
<br>
41+
Just add rn-carousel-indicator to display clickable indicators
42+
</div>
10043
<ul rn-carousel rn-carousel-indicator class="my-slider standard ng-cloak">
10144
<li ng-style="{'background-color': colors[0]}">
10245
This is a standard template
@@ -116,38 +59,60 @@ <h3>template-based demo</h3>
11659
</li>
11760
</ul>
11861

62+
<h3>Standard carousel with thumbs navigation </h3>
63+
<div class="details">This one has an initial index and the thumbs controls the rn-carousel-index binding</div>
64+
<ul rn-carousel rn-carousel-index="slideIndex2" class="my-slider ng-cloak">
65+
<li ng-repeat="slide in slides2" ng-style="{'background-image': 'url(' + slide.img + ')'}"></li>
66+
</ul>
67+
<div class="ng-cloak thumbs">
68+
<div class="thumb" ng-repeat="slide in slides2" ng-click="$parent.slideIndex2=$index" ng-style="{'background-image': 'url(' + slide.img + ')'}" ng-class="{'is-active': ($parent.slideIndex2==$index)}"></div>
69+
</div>
70+
11971
<h3>buffered ngRepeat carousel with custom controls</h3>
72+
<div class="details">Custom controls demo, just update the rn-carousel-index index binding</div>
12073
<ul rn-carousel rn-carousel-buffered rn-carousel-indicator rn-carousel-index="slideIndex" class="my-slider ng-cloak">
121-
<li ng-repeat="slide in slides2" ng-style="{'background-image': 'url(' + slide.img + ')'}">
74+
<li ng-repeat="slide in slides4" ng-style="{'background-image': 'url(' + slide.img + ')'}">
12275
<div class="debug">
123-
{{ slide.label }} / {{ slides2.length }}
76+
{{ slide.label }} / {{ slides4.length }}
12477
<br>
12578
carouselIndex: {{ carouselIndex }}<br>
12679
carouselBufferIndex: {{ carouselBufferIndex }}<br>
12780
</div>
12881
</li>
12982
</ul>
13083
<div class="controls ng-cloak">
131-
<button ng-disabled="slideIndex==0" ng-click="prev()">prev</button>
132-
<span>{{ slideIndex + 1 }} / {{ slides2.length }}</span>
133-
<button ng-click="next()" ng-disabled="slideIndex==slides2.length-1" >next</button>
134-
<button ng-click="pushSlide()">add 3 slides</button>
84+
<button class="button grey" ng-disabled="slideIndex==0" ng-click="prev()">prev</button>
85+
<span>{{ slideIndex + 1 }} / {{ slides4.length }}</span>
86+
<button class="button grey" ng-click="next()" ng-disabled="slideIndex==slides4.length-1" >next</button>
87+
<button class="button grey" ng-click="pushSlide()">add 3 slides</button>
13588
</div>
13689

13790
<h3>object-based ngRepeat carousel with indicators</h3>
138-
<ul rn-carousel rn-carousel-indicator rn-carousel-index="slideIndex" class="my-slider slider3 ng-cloak">
91+
<div class="details">Use the object-based ngRepeat syntax. (not compatible with buffering)</div>
92+
<ul rn-carousel rn-carousel-indicator rn-carousel-index="slideIndex3" class="my-slider slider3 ng-cloak">
13993
<li ng-repeat="(label, color) in slides3" ng-style="{'background-color': color}" class="center">
14094
<div class="big">{{ label }}</div>
14195
</li>
14296
</ul>
14397

98+
<h3>togglable carousel via ng-if</h3>
99+
<div class="details">If you use ng-if, be sure to use the <a target="_blank" href="http://stackoverflow.com/questions/17606936/angularjs-dot-in-ng-model">dot-notation syntax</a> for the index binding.</div>
100+
<button class="ng-cloak button grey" ng-click="showCarousel=!showCarousel">toggle carousel - {{ demo.ifIndex }} / {{ slides5.length }}</button>
101+
<br><br>
102+
103+
<ul ng-if="showCarousel" rn-carousel rn-carousel-indicator rn-carousel-index="demo.ifIndex" class="my-slider slider3 ng-cloak ifCarousel">
104+
<li ng-repeat="color in slides5" ng-style="{'background-color': color}" class="center">
105+
<div class="big">#{{ $index + 1 }}</div>
106+
</li>
107+
</ul>
108+
144109
<h3>Other demos</h3>
145110
<ul>
146111
<li><a href="demo/flickr-full" target="_blank">Flickr browser</a></li>
147112
</ul>
148113
<br><br>
149114
</body>
150-
<script src="//code.angularjs.org/1.2.7/angular.js"></script>
115+
<script src="//code.angularjs.org/1.2.7/angular.min.js"></script>
151116
<script src="//code.angularjs.org/1.2.7/angular-touch.min.js"></script>
152117
<script src="./dist/angular-carousel.js"></script>
153118
<script>
@@ -162,7 +127,7 @@ <h3>Other demos</h3>
162127
var i = target.length;
163128
target.push({
164129
label: 'slide #' + (i + 1),
165-
img: 'http://lorempixel.com/320/250/' + style + '/' + (i % 10) ,
130+
img: 'http://lorempixel.com/450/300/' + style + '/' + (i % 10) ,
166131
color: $scope.colors[ (i*10) % $scope.colors.length],
167132
odd: (i % 2 === 0)
168133
});
@@ -174,10 +139,6 @@ <h3>Other demos</h3>
174139
}
175140
}
176141

177-
$scope.pushSlide = function() {
178-
addSlides($scope.slides2, 'city', 3);
179-
}
180-
181142
// 1st ngRepeat demo
182143
$scope.slides = [];
183144
addSlides($scope.slides, 'sports', 50);
@@ -186,14 +147,23 @@ <h3>Other demos</h3>
186147
$scope.slides2 = [];
187148
$scope.slideIndex = 0;
188149
addSlides($scope.slides2, 'city', 5);
150+
151+
152+
// demo with controls
153+
$scope.slides4 = [];
154+
addSlides($scope.slides4, 'people', 5);
155+
$scope.pushSlide = function() {
156+
addSlides($scope.slides4, 'people', 3);
157+
}
189158
$scope.prev = function() {
190159
$scope.slideIndex--;
191160
}
192161
$scope.next = function() {
193162
$scope.slideIndex++;
194163
}
195164

196-
// 4rd demo
165+
// 4rd demo, object based iterable
166+
$scope.slideIndex3 = 2;
197167
$scope.slides3 = {
198168
'#1': $scope.colors[5],
199169
'#2': $scope.colors[15],
@@ -202,6 +172,22 @@ <h3>Other demos</h3>
202172
'#5': $scope.colors[45]
203173
}
204174

175+
// thumbs demo
176+
$scope.slideIndex2 = 2;
177+
178+
// ngIf demo
179+
$scope.showCarousel = false;
180+
$scope.demo = {
181+
ifIndex: 2
182+
}
183+
$scope.slides5 = [
184+
$scope.colors[5],
185+
$scope.colors[15],
186+
$scope.colors[25],
187+
$scope.colors[35],
188+
$scope.colors[45]
189+
]
190+
205191
});
206192

207193
</script>

0 commit comments

Comments
 (0)