This repository has been archived by the owner on Sep 23, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathdemo.html
101 lines (91 loc) · 3.72 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
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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Psychle jQuery Carousel Plugin Demo (jQuery carousel plugin using Cycle effects)</title>
<link rel="stylesheet" href="css/screen.css">
</head>
<body>
<h1>Psychle jQuery Carousel Plugin</h1>
<p>A jquery-based carousel / slideshow that uses effects from the <a href="http://jquery.malsup.com/cycle/">jQuery Cycle plugin</a>. The plugin is based on code developed by Jenna Smith published on <a href="http://net.tutsplus.com/tutorials/javascript-ajax/building-an-auto-scrolling-slideshow-that-works-with-and-without-javascript/">Nettuts</a>.
<p><a href="https://github.com/technotarek/psychle">Learn more and download on GitHub.</a></p>
<div id="slideshow" class="carousel">
<div class="slides">
<ul>
<li>
<h2>Slide one</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec pretium arcu non velit. Phasellus adipiscing auctor
lorem. Curabitur in urna ut purus consequat sollicitudin.
Phasellus ut diam. Cras magna libero, tempor id, venenatis
sit amet, venenatis et, dui.
</p>
</li>
<li>
<h2>Slide two</h2>
<p>
Nam ac nibh sit amet augue ultricies sagittis. Donec sit
amet nunc. Vivamus lacinia, nisi ac tincidunt commodo, purus
nisi condimentum urna, sit amet molestie odio dolor non lectus.
Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus.
</p>
</li>
<li>
<h2>Slide three</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse adipiscing dui a nibh. Integer tristique lorem
vitae massa. Etiam dapibus, eros sit amet euismod semper,
felis erat congue lacus, sed aliquam metus libero sed elit.
</p>
</li>
</ul>
</div>
<ul class="slides-nav">
<li><a href="#">Slide one</a></li>
<li><a href="#">Slide two</a></li>
<li><a href="#">Slide three</a></li>
</ul>
</div>
<p> </p>
<div id="slideshow-2" class="carousel">
<div class="slides">
<ul>
<li>
<h2>Slide 1</h2>
<img src="http://lorempixel.com/400/200/abstract/1">
</li>
<li>
<h2>Slide 2</h2>
<img src="http://lorempixel.com/400/200/abstract/2">
</li>
<li>
<h2>Slide 3</h2>
<img src="http://lorempixel.com/400/200/abstract/3">
</li>
</ul>
</div>
<ul class="slides-nav">
<li><a href="#">Slide one</a></li>
<li><a href="#">Slide two</a></li>
<li><a href="#">Slide three</a></li>
</ul>
<button id="test">test</button>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/jquery.cycle.all.js"></script>
<script src="js/psychle.js"></script>
<script>
$(document).ready(function() {
$('#slideshow').psychle({timeout:0});
$('#slideshow-2').psychle({fx:'toss'});
$('test').click(function()
{
$('#slideshow').psychle('prev');
});
});
</script>
</body>
</html>