Skip to content

Commit 0b34903

Browse files
yyx990803yyx990803
committed
add slider component example
1 parent baffce4 commit 0b34903

File tree

2 files changed

+162
-0
lines changed

2 files changed

+162
-0
lines changed

‎examples/slider/index.html

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Vue.js slider component example</title>
6+
<link rel="stylesheet" href="style.css">
7+
<script src="../../dist/vue.js"></script>
8+
</head>
9+
<body>
10+
11+
<!-- template for the slider component -->
12+
<script type="text/x-template" id="img-slider-template">
13+
<div id="slider">
14+
<input checked="" type="radio" name="slider" id="slide1" selected="false">
15+
<input type="radio" name="slider" id="slide2" selected="false">
16+
<input type="radio" name="slider" id="slide3" selected="false">
17+
<input type="radio" name="slider" id="slide4" selected="false">
18+
<div id="slides">
19+
<div id="overflow">
20+
<div class="inner">
21+
<article>
22+
<content select="img:nth-of-type(1)"></content>
23+
</article>
24+
<article>
25+
<content select="img:nth-of-type(2)"></content>
26+
</article>
27+
<article>
28+
<content select="img:nth-of-type(3)"></content>
29+
</article>
30+
<article>
31+
<content select="img:nth-of-type(4)"></content>
32+
</article>
33+
</div> <!-- .inner -->
34+
</div> <!-- #overflow -->
35+
</div>
36+
<label for="slide1"></label>
37+
<label for="slide2"></label>
38+
<label for="slide3"></label>
39+
<label for="slide4"></label>
40+
</div>
41+
</script>
42+
43+
<!-- demo root element -->
44+
<div id="demo">
45+
<img-slider>
46+
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5689/rock.jpg">
47+
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5689/grooves.jpg">
48+
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5689/arch.jpg">
49+
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5689/sunset.jpg">
50+
</img-slider>
51+
</div>
52+
53+
<p>
54+
Vue.js implements WebComponent-compliant &lt;content&gt; insertion point mechanism.
55+
</p>
56+
<p>
57+
Markup and CSS borrowed from <a href="http://css-tricks.com/modular-future-web-components/" target="_blank">CSS Tricks</a>, which is in turn adapted from <a href="http://csscience.com/responsiveslidercss3/" target="_blank">CSScience</a>. Images courtesy of <a href="http://www.flickr.com/photos/eliya" target="_blank">Eliya Selhub</a>
58+
</p>
59+
60+
<script>
61+
// define slider component
62+
Vue.component('img-slider', {
63+
template: '#img-slider-template',
64+
replace: true
65+
})
66+
// boot up demo
67+
new Vue({
68+
el: '#demo'
69+
})
70+
</script>
71+
72+
</body>
73+
</html>

‎examples/slider/style.css

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
body {
2+
font-family: 'Helvetica Neue', Arial, sans-serif;
3+
font-size: 12px;
4+
color: #393939;
5+
text-align: center;
6+
}
7+
8+
* {
9+
-webkit-box-sizing: border-box;
10+
-moz-box-sizing: border-box;
11+
-ms-box-sizing: border-box;
12+
box-sizing: border-box;
13+
}
14+
15+
#slider {
16+
max-width: 600px;
17+
text-align: center;
18+
margin: 0 auto;
19+
}
20+
21+
#overflow {
22+
width: 100%;
23+
overflow: hidden;
24+
}
25+
26+
#slides .inner {
27+
width: 400%;
28+
}
29+
30+
#slides .inner {
31+
-webkit-transform: translateZ(0);
32+
-moz-transform: translateZ(0);
33+
-o-transform: translateZ(0);
34+
-ms-transform: translateZ(0);
35+
transform: translateZ(0);
36+
37+
-webkit-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
38+
-moz-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
39+
-o-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
40+
-ms-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
41+
transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
42+
43+
-webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
44+
-moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
45+
-o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
46+
-ms-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
47+
transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
48+
}
49+
50+
#slides article {
51+
width: 25%;
52+
float: left;
53+
}
54+
55+
#slide1:checked ~ #slides .inner {
56+
margin-left: 0;
57+
}
58+
59+
#slide2:checked ~ #slides .inner {
60+
margin-left: -100%;
61+
}
62+
63+
#slide3:checked ~ #slides .inner {
64+
margin-left: -200%;
65+
}
66+
67+
#slide4:checked ~ #slides .inner {
68+
margin-left: -300%;
69+
}
70+
71+
input[type="radio"] {
72+
display: none;
73+
}
74+
75+
label {
76+
background: #CCC;
77+
display: inline-block;
78+
cursor: pointer;
79+
width: 10px;
80+
height: 10px;
81+
border-radius: 5px;
82+
}
83+
84+
#slide1:checked ~ label[for="slide1"],
85+
#slide2:checked ~ label[for="slide2"],
86+
#slide3:checked ~ label[for="slide3"],
87+
#slide4:checked ~ label[for="slide4"] {
88+
background: #333;
89+
}

0 commit comments

Comments
 (0)