-
Notifications
You must be signed in to change notification settings - Fork 7
/
main.html
51 lines (40 loc) · 1.92 KB
/
main.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
<simple-slider style="width:612px; height:612px">
<img src="http://placekitten.com/g/612/612"/>
<img src="https://unsplash.it/612/612/?random=0"/>
<img src="https://unsplash.it/612/612/?random=1"/>
<img src="https://unsplash.it/612/612/?random=2"/>
</simple-slider>
<br/>
<simple-slider style="width:612px; height:612px" transition-property="opacity" start-value="0" visible-value="1" end-value="0">
<img src="http://placekitten.com/g/612/612"/>
<img src="https://unsplash.it/612/612/?random=0"/>
<img src="https://unsplash.it/612/612/?random=1"/>
<img src="https://unsplash.it/612/612/?random=2"/>
</simple-slider>
<br/>
<simple-slider style="width:612px; height:612px" transition-property="top" start-value="-612px" visible-value="0px" end-value="612px">
<img src="http://placekitten.com/g/612/612"/>
<img src="https://unsplash.it/612/612/?random=0"/>
<img src="https://unsplash.it/612/612/?random=1"/>
<img src="https://unsplash.it/612/612/?random=2"/>
</simple-slider>
<br/>
<simple-slider style="width:612px;height:612px">
<img ng-src="{{image}}" ng-repeat="image in ['http://placekitten.com/g/612/612', 'https://unsplash.it/612/612/?random=0', 'https://unsplash.it/612/612/?random=1', 'https://unsplash.it/612/612/?random=2']">
</simple-slider>
<br/>
<select id="slide-selector" ng-model="actualslide">
<option value="0">Slide 1</option>
<option value="1">Slide 2</option>
<option value="2">Slide 3</option>
<option value="3">Slide 4</option>
</select>
<button ng-click="slider.prev()">Prev Slide</button>
<button ng-click="slider.next()">Next Slide</button>
<br/>
<simple-slider slider-instance="slider" current-slide="actualslide" style="width:612px; height:612px" auto-play="false">
<img src="http://placekitten.com/g/612/612"/>
<img src="https://unsplash.it/612/612/?random=0"/>
<img src="https://unsplash.it/612/612/?random=1"/>
<img src="https://unsplash.it/612/612/?random=2"/>
</simple-slider>