Skip to content

Commit

Permalink
first commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@richardscarrott
richardscarrott committed Dec 28, 2010
0 parents commit d8d8376
Show file tree
Hide file tree
Showing 3 changed files with 428 additions and 0 deletions.
81 changes: 81 additions & 0 deletions README
@@ -0,0 +1,81 @@
This is the basic HTML structure required:
<div id="my-carousel">
<ul>
<li>
<!-- item 1 content -->
</li>
<li>
<!-- item 2 content -->
</li>
<li>
<!-- item 3 content -->
</li>
<li>
<!-- item 4 content -->
</li>
<li>
<!-- item 5 content etc. -->
</li>
</ul>
</div>

Here's some CSS to get you going (I've flagged which declarations are required):
#my-carousel ul {
position:absolute; /* required */
overflow:hidden; /* required */
margin:0;
padding:0;
list-style:none;
}

#my-carousel ul li {
float:left; /* required */
width:100px;
height:200px;
margin:0 10px 0 0;
}

#my-carousel .mask {
position:relative; /* required */
overflow:hidden; /* required */
width:540px; /* required */
}

#my-carousel .pagination-links {
list-style:none;
margin:0;
padding:0;
}

#my-carousel .pagination-links li {
display:inline;
}

#my-carousel .pagination-links li.current {
background:grey;
}

#my-carousel .disabled {
color:grey;
}

And here's the JavaScript:
$(document).ready(function() {
$('#my-carousel').carousel();
});

You can pass in any number of options from the following defaults:
{
itemsPerPage: 1, // number of items to show on each page
itemsPerTransition: 1, // number of items moved with each transition
noOfRows: 1, // number of rows (see demo)
nextPrevLinks: true, // whether next and prev links will be included
pagination: true, // whether pagination links will be included
speed: 'normal', // animation speed
easing: 'swing' // supports the jQuery easing plugin
}

The plugin supports multiple carousels on a single page and maintains jQuery�s chainability so usage should feel pretty familiar but if you do become stuck see the demo or leave me a message.

For more information see:
http://richardscarrott.co.uk/posts/view/jquery-carousel-plugin
188 changes: 188 additions & 0 deletions demo.html
@@ -0,0 +1,188 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link href="/favicon.ico" type="image/x-icon" rel="shortcut icon" />
<title>jQuery Carousel Plugin - Richard Scarrott</title>
<link rel="stylesheet" type="text/css" href="/css/demo.css" media="all" />
<style type="text/css">
/** base carousel **/
.carousel ul {
position:absolute;
overflow:hidden;
margin:0;
padding:0;
list-style:none;
}

.no-js .carousel ul {position:static;}

.carousel .mask {
position:relative;
overflow:hidden;
border:6px solid #444;
}

.carousel ul li {
float:left;
width:150px;
height:150px;
color:#fff;
font-size:8em;
text-align:center;
margin:0;
}

.carousel .pagination-links {
list-style:none;
margin:0;
padding:0;
}

.carousel .pagination-links li {
display:inline;
}

.carousel .pagination-links li a {
padding:2px 6px;
}

.carousel .pagination-links li a:hover {text-decoration:none;}

.carousel .pagination-links li.current a {
background:#444;
color:#fff;
}

.carousel .disabled {
color:gray;
cursor:default;
}

/** my carousel 1 **/
#my-carousel-1 .mask {
width:150px;
}

/** my carousel 2 **/
#my-carousel-2 .mask {
width:630px;
}

#my-carousel-2 ul li {
margin:0 10px 0 0;
}

/** my carousel 3 **/
#my-carousel-3 .mask {
width:450px;
}

.color-1 {background:#007cd2;}
.color-2 {background:#1788D7;}
.color-3 {background:#3798db;}
.color-4 {background:#62acdf;}
.color-5 {background:#86bbe0;}
.color-6 {background:#a7c7de;}
.color-7 {background:#d5dbdf;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.carousel.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('body').removeClass('no-js');
$('#my-carousel-1').carousel();
$('#my-carousel-2').carousel({
itemsPerPage: 4,
itemsPerTransition: 4,
speed: 500
});
$('#my-carousel-3').carousel({
itemsPerPage: 3,
itemsPerTransition: 3,
easing: 'linear',
noOfRows: 2
});
});
</script>
</head>
<body class="no-js">
<div id="container">
<h1>jQuery carousel plugin</h1>
<p>For more information see <a href="http://www.richardscarrott.co.uk/posts/view/jquery-carousel-plugin">http://www.richardscarrott.co.uk/posts/view/jquery-carousel-plugin</a></p>

<h2>Default carousel</h2>
<p><code>
$('#my-carousel-1').carousel();
</code></p>
<div id="my-carousel-1" class="carousel module">
<ul>
<li class="color-1">1</li>
<li class="color-4">2</li>
<li class="color-6">3</li>
<li class="color-2">4</li>
<li class="color-3">5</li>
<li class="color-1">6</li>
<li class="color-5">7</li>
</ul>
</div>

<h2>Multiple items carousel</h2>
<p><code>
<pre>
$('#my-carousel-2').carousel({
itemsPerPage: 4,
itemsPerTransition: 4,
speed: 500
});
</pre>
</code></p>
<div id="my-carousel-2" class="carousel module">
<ul>
<li class="color-1">1</li>
<li class="color-4">2</li>
<li class="color-6">3</li>
<li class="color-2">4</li>
<li class="color-3">5</li>
<li class="color-1">6</li>
<li class="color-5">7</li>
<li class="color-2">8</li>
<li class="color-7">9</li>
<li class="color-6">10</li>
<li class="color-2">11</li>
<li class="color-4">12</li>
<li class="color-7">13</li>
<li class="color-5">14</li>
</ul>
</div>

<h2>Multiple rows carousel</h2>
<p><code>
<pre>
$('#my-carousel-3').carousel({
itemsPerPage: 3,
itemsPerTransition: 3,
easing: 'linear',
noOfRows: 2
});
</pre>
</code></p>
<div id="my-carousel-3" class="carousel module">
<ul>
<li class="color-1">1</li>
<li class="color-4">2</li>
<li class="color-6">3</li>
<li class="color-2">4</li>
<li class="color-3">5</li>
<li class="color-1">6</li>
<li class="color-5">7</li>
<li class="color-2">8</li>
<li class="color-7">9</li>
<li class="color-6">10</li>
<li class="color-1">11</li>
<li class="color-4">12</li>
</ul>
</div>
</div>
</body>
</html>

0 comments on commit d8d8376

Please sign in to comment.