"123qawdf"
Bootstrap 3.3.0 Snippet by okebro

Post to Facebook Tweet this

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
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<article id="slider">
<div>
<p>
<span>Elegant Responsive Pure CSS3 Slider</span>
</p>
</div>
<input checked type='radio' name='slider' id='slide1'/>
<input type='radio' name='slider' id='slide2'/>
<input type='radio' name='slider' id='slide3'/>
<input type='radio' name='slider' id='slide4'/>
<input type='radio' name='slider' id='slide5'/>
<div id="slides">
<div id="container">
<div class="inner">
<article>
<img src="http://placehold.it/942X400"/>
</article>
<article>
<div class='caption'>
<bar>A Bubble on Flower</bar>
</div>
<img src="http://0.s3.envato.com/files/84450220/img/Dummy1-942X400.jpg"/>
</article>
<article>
<div class='caption'>
<bar>A Small Elephant <a href="#">read more</a></bar>
</div>
<img src="http://0.s3.envato.com/files/84450220/img/Dummy2-942X400.jpg"/>
</article>
<article>
<div class='caption'>
<bar>A Yellow Flower <a href="#">read more</a></bar>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
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
html,body,div,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tr,th,td,article,aside,canvas,details,embed,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}
body{line-height:1}
ol,ul{list-style:none}
table{border-collapse:collapse;border-spacing:0}
caption,th,td{text-align:left;font-weight:normal;vertical-align:middle}
q,blockquote{quotes:none}
q:before,q:after,blockquote:before,blockquote:after{content:"";content:none}
a img{border:none}
article{display:block}
body{background:#f0523f;overflow-x:hidden}
h1,h2,h3,h4,h5,h6{font-weight:bold;font-size:16px;margin:12px 0}
span{margin:35px 0 5px;font-size:26px;font-weight:normal;color:#fff}
#slider{text-align:center}
h2{margin:40px 0 25px;border-bottom:1px solid #bbb;padding:0 0 10px}
p{margin:20px 0 16px}
strong{font-weight:bold}
label,a{color:brown;cursor:pointer;text-decoration:none;font-style:italic}
label:hover,a:hover{color:#ddd!important}
*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
label,#active,img{-moz-user-select:none;-webkit-user-select:none}
.catch{display:block;height:0;overflow:hidden}
#slider{margin:0 auto}
input{display:none}
#slide1:checked ~ #slides .inner{margin-left:0}
#slide2:checked ~ #slides .inner{margin-left:-100%}
#slide3:checked ~ #slides .inner{margin-left:-200%}
#slide4:checked ~ #slides .inner{margin-left:-300%}
#slide5:checked ~ #slides .inner{margin-left:-400%}
#container{width:100%;overflow:hidden}
article img{width:100%}
#slides .inner{width:500%;line-height:0}
#slides article{width:20%;float:left}
#commands{margin:-25% 0 0 0;width:100%;height:50px}
#commands label{display:none;width:80px;height:80px;opacity:0.5}
#commands label:hover{opacity:0.8}
#active{position:relative;z-index:5;margin:16% 0 0;text-align:center}
#active label{-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;display:inline-block;width:10px;height:10px;background:#bbb}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Kit PRO React

Questions / Comments: