-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdemo.html
38 lines (36 loc) · 2.24 KB
/
demo.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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>mystique-slider</title>
<link type="text/css" rel="stylesheet" href="mystique-slider/slider.css"/>
</head>
<body>
<div id="gallery" style="width:675px;height:450px;" class="mystique-slider" data-controls="pager,arrows">
<div class="slide">
<a href="http://en.wikipedia.org/wiki/Amphiprioninae"><img src="demo/slide1.jpg" /></a>
<div class="caption">
<h3>Clownfish</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum enim metus, gravida vel rutrum non, interdum non ligula. Pellentesque imperdiet nulla in augue pulvinar at vestibulum dui faucibus. Nullam diam nunc, dignissim id dapibus in, ultricies tristique ante.
</div>
</div>
<div class="slide" data-delay="1000">
<a href="http://en.wikipedia.org/wiki/Lion"><img src="demo/lion.jpg" /></a>
<div class="caption push-right">
<h3>Lion</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum enim metus, gravida vel rutrum non, interdum non ligula. Pellentesque imperdiet nulla in augue pulvinar at vestibulum dui faucibus. Nullam diam nunc, dignissim id dapibus in, ultricies tristique ante.
</div>
</div>
<div class="slide" data-delay="1000">
<a href="http://en.wikipedia.org/wiki/Jellyfish"><img src="demo/jelly.jpg" /></a>
<div class="caption push-right">
<h3>Jellyfish</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum enim metus, gravida vel rutrum non, interdum non ligula. Pellentesque imperdiet nulla in augue pulvinar at vestibulum dui faucibus. Nullam diam nunc, dignissim id dapibus in, ultricies tristique ante.
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="mystique-slider/slider.js"></script>
<script type="text/javascript">$(function(){ $("#gallery").slider() });</script>
</body>
</html>