jQuery-Car/index.html at master · ReallyGood/jQuery-Car · GitHub

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery Car Plugin - Example Page</title>
  <link rel="stylesheet" href="jquery.car.css">
  <style>
	/* Styles for these demos, unneccesary for plugin usage */
	.slideshow {
	    width:255px;
	    height:290px;
	    margin:0 auto;
	}
	/* Controls */
	.car-controls {
		padding:0 0 5px 0;
		margin: 10px 0;
		height: 32px;
	}
	.car-controls a {
		display:block;
		background: #ddd;
		color: #222;
		text-align: center;
		text-decoration: none;
		width:50%;
		height:32px;
		line-height: 32px;
		opacity: 0.5;
		float:left;
		outline:0;
	}
	.car-controls a:hover {
		opacity: 1;
	}

	#car2 {
		width: 650px;
		margin: 0 auto;
	}
	#car2, #car2 li {
		width: 650px;
		height: 230px;
	}
	.car2 {
		position: relative; width: 650px;
		margin: 30px auto;
	}
	.car2 .car-controls {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.car2 .car-controls a {
		position: absolute;
		z-index: 20;
		font-weight: 900;
		top: 99px;
		width: 30px;
		border-radius: 50%;
		opacity: 1;
		background: #3366CA;
		color: #fff;
	}

	.car2 .car-controls .next {right: -15px;}
	.car2 .car-controls .prev {left: -15px;}
  </style>
</head>
<body>
<div class="slideshow">
	 <div class="car-controls" data-for="car1">
		<a href="#" class="prev">&larr; Previous</a>
		<a href="#" class="next">Next &rarr;</a>
	 </div>
	<div class="carousel" id="car1">
		<ul>
			<li><img src="http://lorempixel.com/240/240/sports/1/1%20first" width="240" height="240" alt="Slide 1"/></li>
			<li><img src="http://lorempixel.com/240/240/sports/2/2%20second" width="240" height="240" alt="Slide 2"/></li>
			<li><img src="http://lorempixel.com/240/240/sports/3/3%20third" width="240" height="240" alt="Slide 3"/></li>
			<li><img src="http://lorempixel.com/240/240/sports/4/4%20fourth" width="240" height="240" alt="Slide 4"/></li>
			<li><img src="http://lorempixel.com/240/240/sports/5/5%20fifth" width="240" height="240" alt="Slide 5"/></li>
		</ul>
	</div>
</div>
<div class="slideshow car2">
	<div class="car-controls" data-for="car2">
		<a href="#" class="prev">&lArr;</a>
		<a href="#" class="next">&rArr;</a>
	 </div>
	<div class="carousel" id="car2">
		<ul>
			<li><img src="http://lorempixel.com/640/220/nightlife/6/1%20first" width="640" height="220" alt="Slide 1"/></li>
			<li><img src="http://lorempixel.com/640/220/nightlife/2/2%20second" width="640" height="220" alt="Slide 2"/></li>
			<li><img src="http://lorempixel.com/640/220/nightlife/3/3%20third" width="640" height="220" alt="Slide 3"/></li>
			<li><img src="http://lorempixel.com/640/220/nightlife/4/4%20fourth" width="640" height="220" alt="Slide 4"/></li>
		</ul>
	</div>
</div>

<script src="jquery-1.7.1.min.js"></script>
<script src="jquery.easing.1.3.min.js"></script>
<!-- use jquery.car.min.js on production -->
<script src="jquery.car.js"></script>
<script>
$('#car1').car();
$('#car2').car({
	duration: 1000,
	easing: 'easeOutQuad',
	loopEasing: 'easeInElastic'
});
</script>
</body>
</html>