"image slide"
Bootstrap 3.3.0 Snippet by evarevirus

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 ---------->
<div class="container">
<input checked="checked" id="control-1" name="select-img" type="radio" /><label class="control-label" for="control-1">1</label><input id="control-2" name="select-img" type="radio" /><label class="control-label" for="control-2">2</label><input id="control-3" name="select-img" type="radio" /><label class="control-label" for="control-3">3</label><input id="control-4" name="select-img" type="radio" /><label class="control-label" for="control-4">4</label>
<div class="slide-container">
<div>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="title">
<h1>
<span>情缘</span><span>你一直梦想</span>
</h1>
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
body {
font-family: Cambria;
background: repeating-linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7) 92%, rgba(255, 255, 255, 0.5)), repeating-linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1) 92%, rgba(0, 0, 0, 0.2)), repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1) 92%, rgba(0, 0, 0, 0.2));
background-size: 18px 18px,12px 12px,12px 12px;
}
.container {
margin: 5em auto;
width: 600px;
height: 400px;
position: relative;
border: 20px solid white;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
/* input */
/* slide-container */
/* background */
/* background position */
/* 1 */
/* 2 */
/* 3 */
/* 4 */
/* title */
/* active */
/* even */
/* label */
/* title show */
/* title h1 show */
}
.container input {
display: none;
}
.container .control-label {
margin-top: 350px;
float: left;
width: 150px;
height: 30px;
position: relative;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Kit PRO React
Image Crop jQuery
Mega menu slide down on hover with carousel
Image Checkbox

Questions / Comments: