Skip to content
Browse files

updated examples to reflect those from on-line documentation

  • Loading branch information...
1 parent 7f4c4d5 commit f9a25caab079314a096b590ca20221624c3817ce Wojciech Ryrych committed Dec 31, 2011
View
26 examples/ajax.html
@@ -3,6 +3,8 @@
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>rcarousel - load elements on demand</title>
+ <link type="text/css" rel="stylesheet" href="css/reset.css" />
+ <link type="text/css" rel="stylesheet" href="css/style.css" />
<link type="text/css" rel="stylesheet" href="../widget/css/rcarousel.css" />
<style type="text/css">
#carousel {
@@ -11,13 +13,25 @@
</style>
</head>
<body>
- <p>Loading elements on demand. May not work locally in some browsers.</p>
- <div id="carousel">
- <img src="images/001.jpg" />
- <img src="images/002.jpg" />
- <img src="images/003.jpg" />
+ <div id="header">
+ <p>
+ This is an example of <em>rcarousel</em> – a jQuery UI continuous carousel.
+ Go back to the <a href="http://ryrych.github.com/rcarousel/">documentation</a>
+ </p>
+ </div>
+
+ <div id="content">
+ <h1>Loading elements on demand.</h1>
+
+ <div id="carousel">
+ <img src="images/001.jpg" />
+ <img src="images/002.jpg" />
+ <img src="images/003.jpg" />
+ </div>
+ <p><input type="button" name="but" id="but" value="load new elements from the server" /></p>
+
+ <p><em>May not work locally in some browsers.</em></p>
</div>
- <p><input type="button" name="but" id="but" value="load new elements from the server" /></p>
<script type="text/javascript" src="../widget/lib/jquery-1.7.1.js"></script>
<script type="text/javascript" src="../widget/lib/jquery.ui.core.js"></script>
View
44 examples/auto_reverse.html
@@ -2,7 +2,9 @@
<html xmlns="http://www.w3.org/1999/xhtml" lang="pl" xml:lang="pl">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
- <title>rcarousel - auto reverse example</title>
+ <title>rcarousel – Auto mode</title>
+ <link type="text/css" rel="stylesheet" href="css/reset.css" />
+ <link type="text/css" rel="stylesheet" href="css/style.css" />
<link type="text/css" rel="stylesheet" href="../widget/css/rcarousel.css" />
<style type="text/css">
#container {
@@ -43,22 +45,32 @@
</style>
</head>
<body>
- <p>carousel with auto mode, custom interval between slides and reversed direction</p>
- <div id="container">
- <div id="carousel">
- <img src="images/001.jpg" />
- <img src="images/002.jpg" />
- <img src="images/003.jpg" />
- <img src="images/004.jpg" />
- <img src="images/005.jpg" />
- <img src="images/006.jpg" />
- <img src="images/007.jpg" />
- <img src="images/008.jpg" />
- <img src="images/009.jpg" />
- <img src="images/010.jpg" />
+ <div id="header">
+ <p>
+ This is an example of <em>rcarousel</em> – a jQuery UI continuous carousel.
+ Go back to the <a href="http://ryrych.github.com/rcarousel/">documentation</a>
+ </p>
+ </div>
+
+ <div id="content">
+ <h1>carousel with Auto mode, custom interval between slides and reversed direction</h1>
+
+ <div id="container">
+ <div id="carousel">
+ <img src="images/001.jpg" />
+ <img src="images/002.jpg" />
+ <img src="images/003.jpg" />
+ <img src="images/004.jpg" />
+ <img src="images/005.jpg" />
+ <img src="images/006.jpg" />
+ <img src="images/007.jpg" />
+ <img src="images/008.jpg" />
+ <img src="images/009.jpg" />
+ <img src="images/010.jpg" />
+ </div>
+ <a href="#" id="ui-carousel-next"><span>next</span></a>
+ <a href="#" id="ui-carousel-prev"><span>prev</span></a>
</div>
- <a href="#" id="ui-carousel-next"><span>next</span></a>
- <a href="#" id="ui-carousel-prev"><span>prev</span></a>
</div>
<script type="text/javascript" src="../widget/lib/jquery-1.7.1.js"></script>
View
53 examples/css/reset.css
@@ -0,0 +1,53 @@
+/* http://meyerweb.com/eric/tools/css/reset/ */
+/* v1.0 | 20080212 */
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, font, 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, tbody, tfoot, thead, tr, th, td {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ outline: 0;
+ font-size: 100%;
+ vertical-align: baseline;
+ background: transparent;
+}
+body {
+ line-height: 1;
+}
+ol, ul {
+ list-style: none;
+}
+blockquote, q {
+ quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+ content: '';
+ content: none;
+}
+
+/* remember to define focus styles! */
+:focus {
+ outline: 0;
+}
+
+/* remember to highlight inserts somehow! */
+ins {
+ text-decoration: none;
+}
+del {
+ text-decoration: line-through;
+}
+
+/* tables still need 'cellspacing="0"' in the markup */
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
View
29 examples/css/style.css
@@ -0,0 +1,29 @@
+body {
+ font: 16px/1.5 sans-serif;
+
+}
+
+#header {
+ background-color: #FF5C43;
+ color: #fff;
+ text-align: center;
+ padding: 20px;
+ margin-bottom: 20px;
+}
+
+#content {
+ margin: 20px;
+}
+
+h1 {
+ font-size: 2em;
+ margin-bottom: 30px;
+}
+
+a:link, a:visited, a:hover, a:active {
+ color: #fff;
+}
+
+em {
+ font-style: italic;
+}
View
43 examples/custom_step_and_visible.html
@@ -2,7 +2,9 @@
<html xmlns="http://www.w3.org/1999/xhtml" lang="pl" xml:lang="pl">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
- <title>rcarousel - custom step and visible example</title>
+ <title>rcarousel - custom step and visible</title>
+ <link type="text/css" rel="stylesheet" href="css/reset.css" />
+ <link type="text/css" rel="stylesheet" href="css/style.css" />
<link type="text/css" rel="stylesheet" href="../widget/css/rcarousel.css" />
<style type="text/css">
#container {
@@ -43,22 +45,31 @@
</style>
</head>
<body>
- <p>custom number of visible elements (5) and step (2)</p>
- <div id="container">
- <div id="carousel">
- <img src="images/001.jpg" />
- <img src="images/002.jpg" />
- <img src="images/003.jpg" />
- <img src="images/004.jpg" />
- <img src="images/005.jpg" />
- <img src="images/006.jpg" />
- <img src="images/007.jpg" />
- <img src="images/008.jpg" />
- <img src="images/009.jpg" />
- <img src="images/010.jpg" />
+ <div id="header">
+ <p>
+ This is an example of <em>rcarousel</em> – a jQuery UI continuous carousel.
+ Go back to the <a href="http://ryrych.github.com/rcarousel/">documentation</a>
+ </p>
+ </div>
+
+ <div id="content">
+ <h1>custom number of visible elements (5) and step (2)</h1>
+ <div id="container">
+ <div id="carousel">
+ <img src="images/001.jpg" />
+ <img src="images/002.jpg" />
+ <img src="images/003.jpg" />
+ <img src="images/004.jpg" />
+ <img src="images/005.jpg" />
+ <img src="images/006.jpg" />
+ <img src="images/007.jpg" />
+ <img src="images/008.jpg" />
+ <img src="images/009.jpg" />
+ <img src="images/010.jpg" />
+ </div>
+ <a href="#" id="ui-carousel-next"><span>next</span></a>
+ <a href="#" id="ui-carousel-prev"><span>prev</span></a>
</div>
- <a href="#" id="ui-carousel-next"><span>next</span></a>
- <a href="#" id="ui-carousel-prev"><span>prev</span></a>
</div>
<script type="text/javascript" src="../widget/lib/jquery-1.7.1.js"></script>
View
42 examples/gotopage.html
@@ -2,7 +2,9 @@
<html xmlns="http://www.w3.org/1999/xhtml" lang="pl" xml:lang="pl">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
- <title>rcarousel - go to page example</title>
+ <title>rcarousel – custom navigation</title>
+ <link type="text/css" rel="stylesheet" href="css/reset.css" />
+ <link type="text/css" rel="stylesheet" href="css/style.css" />
<link type="text/css" rel="stylesheet" href="../widget/css/rcarousel.css" />
<style type="text/css">
#container {
@@ -27,21 +29,31 @@
</style>
</head>
<body>
- <p>more advanced example: callbacks, custom navigation and auto mode</p>
- <div id="container">
- <div id="carousel">
- <img src="images/001.jpg" />
- <img src="images/002.jpg" />
- <img src="images/003.jpg" />
- <img src="images/004.jpg" />
- <img src="images/005.jpg" />
- <img src="images/006.jpg" />
- <img src="images/007.jpg" />
- <img src="images/008.jpg" />
- <img src="images/009.jpg" />
- <img src="images/010.jpg" />
+ <div id="header">
+ <p>
+ This is an example of <em>rcarousel</em> – a jQuery UI continuous carousel.
+ Go back to the <a href="http://ryrych.github.com/rcarousel/">documentation</a>
+ </p>
+ </div>
+
+ <div id="content">
+ <h1>more advanced example: callbacks, custom navigation and auto mode</h1>
+
+ <div id="container">
+ <div id="carousel">
+ <img src="images/001.jpg" />
+ <img src="images/002.jpg" />
+ <img src="images/003.jpg" />
+ <img src="images/004.jpg" />
+ <img src="images/005.jpg" />
+ <img src="images/006.jpg" />
+ <img src="images/007.jpg" />
+ <img src="images/008.jpg" />
+ <img src="images/009.jpg" />
+ <img src="images/010.jpg" />
+ </div>
+ <div id="pages"></div>
</div>
- <div id="pages"></div>
</div>
<script type="text/javascript" src="../widget/lib/jquery-1.7.1.js"></script>
View
107 examples/html.html
@@ -2,8 +2,10 @@
<html xmlns="http://www.w3.org/1999/xhtml" lang="pl" xml:lang="pl">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
- <title>rcarousel - html content example</title>
+ <title>rcarousel - html content</title>
<link href='http://fonts.googleapis.com/css?family=Anton|Ubuntu' rel='stylesheet' type='text/css'>
+ <link type="text/css" rel="stylesheet" href="css/reset.css" />
+ <link type="text/css" rel="stylesheet" href="css/style.css" />
<link type="text/css" rel="stylesheet" href="../widget/css/rcarousel.css" />
<style type="text/css">
#container {
@@ -150,59 +152,70 @@
</style>
</head>
<body>
- <div id="container">
- <div id="carousel">
- <div id="slide01" class="slide">
- <img src="images/html_slides/jqueryui.png" alt="jQuery UI logo" />
- <div class="text">
- <h1>continuous<br />carousel</h1>
- <p>driven by jQuery UI</p>
+ <div id="header">
+ <p>
+ This is an example of <em>rcarousel</em> – a jQuery UI continuous carousel.
+ Go back to the <a href="http://ryrych.github.com/rcarousel/">documentation</a>
+ </p>
+ </div>
+
+ <div id="content">
+ <h1>Any HTML element in slides</h1>
+
+ <div id="container">
+ <div id="carousel">
+ <div id="slide01" class="slide">
+ <img src="images/html_slides/jqueryui.png" alt="jQuery UI logo" />
+ <div class="text">
+ <h1>continuous<br />carousel</h1>
+ <p>driven by jQuery UI</p>
+ </div>
</div>
- </div>
-
- <div id="slide02" class="slide">
- <img src="images/html_slides/anycontent.png" alt="any content" />
- <div class="text">
- <h1>any content</h1>
- <p>from images to any HTML element</p>
+
+ <div id="slide02" class="slide">
+ <img src="images/html_slides/anycontent.png" alt="any content" />
+ <div class="text">
+ <h1>any content</h1>
+ <p>from images to any HTML element</p>
+ </div>
</div>
- </div>
-
- <div id="slide03" class="slide">
- <img src="images/html_slides/horizontalvertical.png" alt="horizontal and vertical carousel" />
- <div class="text">
- <h1>horizontal<br />and vertical</h1>
- <p>carousels just one click away</p>
+
+ <div id="slide03" class="slide">
+ <img src="images/html_slides/horizontalvertical.png" alt="horizontal and vertical carousel" />
+ <div class="text">
+ <h1>horizontal<br />and vertical</h1>
+ <p>carousels just one click away</p>
+ </div>
</div>
- </div>
-
- <div id="slide04" class="slide">
- <img src="images/html_slides/multi.png" alt="multi carousels" />
- <div class="text">
- <h1>multi<br />carousels</h1>
- <p>on a page</p>
+
+ <div id="slide04" class="slide">
+ <img src="images/html_slides/multi.png" alt="multi carousels" />
+ <div class="text">
+ <h1>multi<br />carousels</h1>
+ <p>on a page</p>
+ </div>
</div>
- </div>
-
- <div id="slide05" class="slide">
- <img src="images/html_slides/customization.png" alt="customization" />
- <div class="text">
- <h1>highly<br />customizable</h1>
- <p>style it whatever you like</p>
+
+ <div id="slide05" class="slide">
+ <img src="images/html_slides/customization.png" alt="customization" />
+ <div class="text">
+ <h1>highly<br />customizable</h1>
+ <p>style it whatever you like</p>
+ </div>
</div>
+
+ <div id="slide06" class="slide">
+ <img src="images/html_slides/browsers.png" alt="multi browser support" />
+ <div class="text">
+ <h1>multi browser<br />support</h1>
+ <p>supports even old browsers</p>
+ </div>
+ </div>
</div>
-
- <div id="slide06" class="slide">
- <img src="images/html_slides/browsers.png" alt="multi browser support" />
- <div class="text">
- <h1>multi browser<br />support</h1>
- <p>supports even old browsers</p>
- </div>
- </div>
+ <a href="#" id="ui-carousel-next"><span>next</span></a>
+ <a href="#" id="ui-carousel-prev"><span>prev</span></a>
+ <div id="pages"></div>
</div>
- <a href="#" id="ui-carousel-next"><span>next</span></a>
- <a href="#" id="ui-carousel-prev"><span>prev</span></a>
- <div id="pages"></div>
</div>
<script type="text/javascript" src="../widget/lib/jquery-1.7.1.js"></script>
View
30 examples/links.html
@@ -2,7 +2,9 @@
<html xmlns="http://www.w3.org/1999/xhtml" lang="pl" xml:lang="pl">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
- <title>rcarousel - images with links example</title>
+ <title>rcarousel - images with links</title>
+ <link type="text/css" rel="stylesheet" href="css/reset.css" />
+ <link type="text/css" rel="stylesheet" href="css/style.css" />
<link type="text/css" rel="stylesheet" href="../widget/css/rcarousel.css" />
<style type="text/css">
#container {
@@ -43,15 +45,25 @@
</style>
</head>
<body>
- <p>carousel with images wrapped with links</p>
- <div id="container">
- <div id="carousel">
- <a href="http://ryrych.pl"><img src="images/001.jpg" /></a>
- <a href="http://google.pl"><img src="images/002.jpg" /></a>
- <a href="http://niezalezna.pl"><img src="images/003.jpg" /></a>
+ <div id="header">
+ <p>
+ This is an example of <em>rcarousel</em> – a jQuery UI continuous carousel.
+ Go back to the <a href="http://ryrych.github.com/rcarousel/">documentation</a>
+ </p>
+ </div>
+
+ <div id="content">
+ <h1>images with links</h1>
+
+ <div id="container">
+ <div id="carousel">
+ <a href="http://ryrych.pl"><img src="images/001.jpg" /></a>
+ <a href="http://google.pl"><img src="images/002.jpg" /></a>
+ <a href="http://niezalezna.pl"><img src="images/003.jpg" /></a>
+ </div>
+ <a href="#" id="ui-carousel-next"><span>next</span></a>
+ <a href="#" id="ui-carousel-prev"><span>prev</span></a>
</div>
- <a href="#" id="ui-carousel-next"><span>next</span></a>
- <a href="#" id="ui-carousel-prev"><span>prev</span></a>
</div>
<script type="text/javascript" src="../widget/lib/jquery-1.7.1.js"></script>
View
44 examples/margin.html
@@ -2,7 +2,9 @@
<html xmlns="http://www.w3.org/1999/xhtml" lang="pl" xml:lang="pl">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
- <title>rcarousel - margin example</title>
+ <title>rcarousel - margin between elements</title>
+ <link type="text/css" rel="stylesheet" href="css/reset.css" />
+ <link type="text/css" rel="stylesheet" href="css/style.css" />
<link type="text/css" rel="stylesheet" href="../widget/css/rcarousel.css" />
<style type="text/css">
#container {
@@ -43,22 +45,32 @@
</style>
</head>
<body>
- <p>carousel with margin between elements</p>
- <div id="container">
- <div id="carousel">
- <img src="images/001.jpg" />
- <img src="images/002.jpg" />
- <img src="images/003.jpg" />
- <img src="images/004.jpg" />
- <img src="images/005.jpg" />
- <img src="images/006.jpg" />
- <img src="images/007.jpg" />
- <img src="images/008.jpg" />
- <img src="images/009.jpg" />
- <img src="images/010.jpg" />
+ <div id="header">
+ <p>
+ This is an example of <em>rcarousel</em> – a jQuery UI continuous carousel.
+ Go back to the <a href="http://ryrych.github.com/rcarousel/">documentation</a>
+ </p>
+ </div>
+
+ <div id="content">
+ <h1>carousel with margin between elements</h1>
+
+ <div id="container">
+ <div id="carousel">
+ <img src="images/001.jpg" />
+ <img src="images/002.jpg" />
+ <img src="images/003.jpg" />
+ <img src="images/004.jpg" />
+ <img src="images/005.jpg" />
+ <img src="images/006.jpg" />
+ <img src="images/007.jpg" />
+ <img src="images/008.jpg" />
+ <img src="images/009.jpg" />
+ <img src="images/010.jpg" />
+ </div>
+ <a href="#" id="ui-carousel-next"><span>next</span></a>
+ <a href="#" id="ui-carousel-prev"><span>prev</span></a>
</div>
- <a href="#" id="ui-carousel-next"><span>next</span></a>
- <a href="#" id="ui-carousel-prev"><span>prev</span></a>
</div>
<script type="text/javascript" src="../widget/lib/jquery-1.7.1.js"></script>
View
246 examples/multi.html
@@ -2,7 +2,9 @@
<html xmlns="http://www.w3.org/1999/xhtml" lang="pl" xml:lang="pl">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
- <title>ui-carousel - custom step and visible example</title>
+ <title>rcarousel – multi carousels on a page</title>
+ <link type="text/css" rel="stylesheet" href="css/reset.css" />
+ <link type="text/css" rel="stylesheet" href="css/style.css" />
<link type="text/css" rel="stylesheet" href="../widget/css/rcarousel.css" />
<style type="text/css">
#carousels {
@@ -76,123 +78,133 @@
</style>
</head>
<body>
- <p>multiple carousels on the page - guess how many are used? :)</p>
- <div id="carousels">
- <div id="carousel1">
- <img src="images/001.jpg" />
- <img src="images/002.jpg" />
- <img src="images/003.jpg" />
- <img src="images/004.jpg" />
- <img src="images/005.jpg" />
- <img src="images/006.jpg" />
- <img src="images/007.jpg" />
- <img src="images/008.jpg" />
- <img src="images/009.jpg" />
- <img src="images/010.jpg" />
- </div>
-
- <div id="carousel2">
- <img src="images/001.jpg" />
- <img src="images/002.jpg" />
- <img src="images/003.jpg" />
- <img src="images/004.jpg" />
- <img src="images/005.jpg" />
- <img src="images/006.jpg" />
- <img src="images/007.jpg" />
- <img src="images/008.jpg" />
- <img src="images/009.jpg" />
- <img src="images/010.jpg" />
- </div>
-
- <div id="carousel3">
- <img src="images/001.jpg" />
- <img src="images/002.jpg" />
- <img src="images/003.jpg" />
- <img src="images/004.jpg" />
- <img src="images/005.jpg" />
- <img src="images/006.jpg" />
- <img src="images/007.jpg" />
- <img src="images/008.jpg" />
- <img src="images/009.jpg" />
- <img src="images/010.jpg" />
- </div>
-
- <div id="carousel4">
- <img src="images/001.jpg" />
- <img src="images/002.jpg" />
- <img src="images/003.jpg" />
- <img src="images/004.jpg" />
- <img src="images/005.jpg" />
- <img src="images/006.jpg" />
- <img src="images/007.jpg" />
- <img src="images/008.jpg" />
- <img src="images/009.jpg" />
- <img src="images/010.jpg" />
- </div>
-
- <div id="carousel5">
- <img src="images/001.jpg" />
- <img src="images/002.jpg" />
- <img src="images/003.jpg" />
- <img src="images/004.jpg" />
- <img src="images/005.jpg" />
- <img src="images/006.jpg" />
- <img src="images/007.jpg" />
- <img src="images/008.jpg" />
- <img src="images/009.jpg" />
- <img src="images/010.jpg" />
- </div>
-
- <div id="carousel6">
- <img src="images/001.jpg" />
- <img src="images/002.jpg" />
- <img src="images/003.jpg" />
- <img src="images/004.jpg" />
- <img src="images/005.jpg" />
- <img src="images/006.jpg" />
- <img src="images/007.jpg" />
- <img src="images/008.jpg" />
- <img src="images/009.jpg" />
- <img src="images/010.jpg" />
- </div>
-
- <div id="carousel7">
- <img src="images/001.jpg" />
- <img src="images/002.jpg" />
- <img src="images/003.jpg" />
- <img src="images/004.jpg" />
- <img src="images/005.jpg" />
- <img src="images/006.jpg" />
- <img src="images/007.jpg" />
- <img src="images/008.jpg" />
- <img src="images/009.jpg" />
- <img src="images/010.jpg" />
- </div>
+ <div id="header">
+ <p>
+ This is an example of <em>rcarousel</em> – a jQuery UI continuous carousel.
+ Go back to the <a href="http://ryrych.github.com/rcarousel/">documentation</a>
+ </p>
+ </div>
+
+ <div id="content">
+ <h1>multiple carousels on a page</h1>
- <div id="carousel8">
- <img src="images/001.jpg" />
- <img src="images/002.jpg" />
- <img src="images/003.jpg" />
- <img src="images/004.jpg" />
- <img src="images/005.jpg" />
- <img src="images/006.jpg" />
- <img src="images/007.jpg" />
- <img src="images/008.jpg" />
- <img src="images/009.jpg" />
- <img src="images/010.jpg" />
- </div>
-
- <div id="carousel9">
- <img src="images/001.jpg" />
- <img src="images/002.jpg" />
- <img src="images/003.jpg" />
- <img src="images/004.jpg" />
- <img src="images/005.jpg" />
- <img src="images/006.jpg" />
- <img src="images/007.jpg" />
- <img src="images/008.jpg" />
- <img src="images/009.jpg" />
- <img src="images/010.jpg" />
+ <div id="carousels">
+ <div id="carousel1">
+ <img src="images/001.jpg" />
+ <img src="images/002.jpg" />
+ <img src="images/003.jpg" />
+ <img src="images/004.jpg" />
+ <img src="images/005.jpg" />
+ <img src="images/006.jpg" />
+ <img src="images/007.jpg" />
+ <img src="images/008.jpg" />
+ <img src="images/009.jpg" />
+ <img src="images/010.jpg" />
+ </div>
+
+ <div id="carousel2">
+ <img src="images/001.jpg" />
+ <img src="images/002.jpg" />
+ <img src="images/003.jpg" />
+ <img src="images/004.jpg" />
+ <img src="images/005.jpg" />
+ <img src="images/006.jpg" />
+ <img src="images/007.jpg" />
+ <img src="images/008.jpg" />
+ <img src="images/009.jpg" />
+ <img src="images/010.jpg" />
+ </div>
+
+ <div id="carousel3">
+ <img src="images/001.jpg" />
+ <img src="images/002.jpg" />
+ <img src="images/003.jpg" />
+ <img src="images/004.jpg" />
+ <img src="images/005.jpg" />
+ <img src="images/006.jpg" />
+ <img src="images/007.jpg" />
+ <img src="images/008.jpg" />
+ <img src="images/009.jpg" />
+ <img src="images/010.jpg" />
+ </div>
+
+ <div id="carousel4">
+ <img src="images/001.jpg" />
+ <img src="images/002.jpg" />
+ <img src="images/003.jpg" />
+ <img src="images/004.jpg" />
+ <img src="images/005.jpg" />
+ <img src="images/006.jpg" />
+ <img src="images/007.jpg" />
+ <img src="images/008.jpg" />
+ <img src="images/009.jpg" />
+ <img src="images/010.jpg" />
+ </div>
+
+ <div id="carousel5">
+ <img src="images/001.jpg" />
+ <img src="images/002.jpg" />
+ <img src="images/003.jpg" />
+ <img src="images/004.jpg" />
+ <img src="images/005.jpg" />
+ <img src="images/006.jpg" />
+ <img src="images/007.jpg" />
+ <img src="images/008.jpg" />
+ <img src="images/009.jpg" />
+ <img src="images/010.jpg" />
+ </div>
+
+ <div id="carousel6">
+ <img src="images/001.jpg" />
+ <img src="images/002.jpg" />
+ <img src="images/003.jpg" />
+ <img src="images/004.jpg" />
+ <img src="images/005.jpg" />
+ <img src="images/006.jpg" />
+ <img src="images/007.jpg" />
+ <img src="images/008.jpg" />
+ <img src="images/009.jpg" />
+ <img src="images/010.jpg" />
+ </div>
+
+ <div id="carousel7">
+ <img src="images/001.jpg" />
+ <img src="images/002.jpg" />
+ <img src="images/003.jpg" />
+ <img src="images/004.jpg" />
+ <img src="images/005.jpg" />
+ <img src="images/006.jpg" />
+ <img src="images/007.jpg" />
+ <img src="images/008.jpg" />
+ <img src="images/009.jpg" />
+ <img src="images/010.jpg" />
+ </div>
+
+ <div id="carousel8">
+ <img src="images/001.jpg" />
+ <img src="images/002.jpg" />
+ <img src="images/003.jpg" />
+ <img src="images/004.jpg" />
+ <img src="images/005.jpg" />
+ <img src="images/006.jpg" />
+ <img src="images/007.jpg" />
+ <img src="images/008.jpg" />
+ <img src="images/009.jpg" />
+ <img src="images/010.jpg" />
+ </div>
+
+ <div id="carousel9">
+ <img src="images/001.jpg" />
+ <img src="images/002.jpg" />
+ <img src="images/003.jpg" />
+ <img src="images/004.jpg" />
+ <img src="images/005.jpg" />
+ <img src="images/006.jpg" />
+ <img src="images/007.jpg" />
+ <img src="images/008.jpg" />
+ <img src="images/009.jpg" />
+ <img src="images/010.jpg" />
+ </div>
</div>
</div>
View
38 examples/simple.html
@@ -2,7 +2,9 @@
<html xmlns="http://www.w3.org/1999/xhtml" lang="pl" xml:lang="pl">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
- <title>rcarousel - simple carousel example</title>
+ <title>rcarousel – simple carousel</title>
+ <link type="text/css" rel="stylesheet" href="css/reset.css" />
+ <link type="text/css" rel="stylesheet" href="css/style.css" />
<link type="text/css" rel="stylesheet" href="../widget/css/rcarousel.css" />
<style type="text/css">
#carousel {
@@ -11,18 +13,28 @@
</style>
</head>
<body>
- <p>simple carousel without navigation but with auto mode</p>
- <div id="carousel">
- <img src="images/001.jpg" />
- <img src="images/002.jpg" />
- <img src="images/003.jpg" />
- <img src="images/004.jpg" />
- <img src="images/005.jpg" />
- <img src="images/006.jpg" />
- <img src="images/007.jpg" />
- <img src="images/008.jpg" />
- <img src="images/009.jpg" />
- <img src="images/010.jpg" />
+ <div id="header">
+ <p>
+ This is an example of <em>rcarousel</em> – a jQuery UI continuous carousel.
+ Go back to the <a href="http://ryrych.github.com/rcarousel/">documentation</a>
+ </p>
+ </div>
+
+ <div id="content">
+ <h1>simple carousel without navigation but with Auto mode</h1>
+
+ <div id="carousel">
+ <img src="images/001.jpg" />
+ <img src="images/002.jpg" />
+ <img src="images/003.jpg" />
+ <img src="images/004.jpg" />
+ <img src="images/005.jpg" />
+ <img src="images/006.jpg" />
+ <img src="images/007.jpg" />
+ <img src="images/008.jpg" />
+ <img src="images/009.jpg" />
+ <img src="images/010.jpg" />
+ </div>
</div>
<script type="text/javascript" src="../widget/lib/jquery-1.7.1.js"></script>
View
44 examples/vertical.html
@@ -2,7 +2,9 @@
<html xmlns="http://www.w3.org/1999/xhtml" lang="pl" xml:lang="pl">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
- <title>rcarousel - margin example</title>
+ <title>rcarousel – vertical carousel</title>
+ <link type="text/css" rel="stylesheet" href="css/reset.css" />
+ <link type="text/css" rel="stylesheet" href="css/style.css" />
<link type="text/css" rel="stylesheet" href="../widget/css/rcarousel.css" />
<style type="text/css">
#container {
@@ -45,22 +47,32 @@
</style>
</head>
<body>
- <p>vertical carousel</p>
- <div id="container">
- <div id="carousel">
- <img src="images/001.jpg" />
- <img src="images/002.jpg" />
- <img src="images/003.jpg" />
- <img src="images/004.jpg" />
- <img src="images/005.jpg" />
- <img src="images/006.jpg" />
- <img src="images/007.jpg" />
- <img src="images/008.jpg" />
- <img src="images/009.jpg" />
- <img src="images/010.jpg" />
+ <div id="header">
+ <p>
+ This is an example of <em>rcarousel</em> – a jQuery UI continuous carousel.
+ Go back to the <a href="http://ryrych.github.com/rcarousel/">documentation</a>
+ </p>
+ </div>
+
+ <div id="content">
+ <h1>vertical carousel</h1>
+
+ <div id="container">
+ <div id="carousel">
+ <img src="images/001.jpg" />
+ <img src="images/002.jpg" />
+ <img src="images/003.jpg" />
+ <img src="images/004.jpg" />
+ <img src="images/005.jpg" />
+ <img src="images/006.jpg" />
+ <img src="images/007.jpg" />
+ <img src="images/008.jpg" />
+ <img src="images/009.jpg" />
+ <img src="images/010.jpg" />
+ </div>
+ <a href="#" id="ui-carousel-next"><span>next</span></a>
+ <a href="#" id="ui-carousel-prev"><span>prev</span></a>
</div>
- <a href="#" id="ui-carousel-next"><span>next</span></a>
- <a href="#" id="ui-carousel-prev"><span>prev</span></a>
</div>
<script type="text/javascript" src="../widget/lib/jquery-1.7.1.js"></script>

0 comments on commit f9a25ca

Please sign in to comment.
Something went wrong with that request. Please try again.