Easy customizable jQuery Carousel Plugin - Tiny Carousel

Tiny Carousel is a lightweight and easy customizable jQuery carousel plugin to horizontally or vertically slide sets of html elements with some useful options.

Basic Usage:

1. Include the latest jQuery javascript library and jQuery Tiny Carousel plugin after jQuery

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.tinycarousel.min.js"></script>

2. Create the html for the carousel slider

<div id="slider1"> <a class="buttons prev" href="#">left</a>
<div class="viewport">
<ul class="overview">
<li><img src="images/picture6.jpg" /></li>
<li><img src="images/picture5.jpg" /></li>
<li><img src="images/picture4.jpg" /></li>
<li><img src="images/picture3.jpg" /></li>
<li><img src="images/picture2.jpg" /></li>
<li><img src="images/picture1.jpg" /></li>
</ul>
</div>
<a class="buttons next" href="#">right</a> </div>

3. The CSS

/* Tiny Carousel */
#slider1 {
height: 1%;
overflow: hidden;
padding: 0 0 10px;
}
#slider1 .viewport {
float: left;
width: 240px;
height: 125px;
overflow: hidden;
position: relative;
}
#slider1 .buttons {
background: url("../images/buttons.png") no-repeat scroll 0 0 transparent;
display: block;
margin: 30px 10px 0 0;
background-position: 0 -38px;
text-indent: -999em;
float: left;
width: 39px;
height: 37px;
overflow: hidden;
position: relative;
}
#slider1 .next {
background-position: 0 0;
margin: 30px 0 0 10px;
}
#slider1 .disable {
visibility: hidden;
}
#slider1 .overview {
list-style: none;
position: absolute;
padding: 0;
margin: 0;
width: 240px;
left: 0 top: 0;
}
#slider1 .overview li {
float: left;
margin: 0 20px 0 0;
padding: 1px;
height: 121px;
border: 1px solid #dcdcdc;
width: 236px;
}

4. Call the plugin with options

<script type="text/javascript">
$(document).ready(function(){
$('#slider1').tinycarousel({
start: 1, // where should the carousel start?
display: 1, // how many blocks do you want to move at a time?
axis: 'x', // vertical or horizontal scroller? 'x' or 'y' .
controls: true, // show left and right navigation buttons?
pager: false, // is there a page number navigation present?
interval: false, // move to the next block on interval.
intervaltime: 3000, // interval time in milliseconds.
animation: true, // false is instant, true is animate.
duration: 1000, // how fast must the animation move in milliseconds?
callback: null, // function that executes after every move
});
});
</script>

---

This awesome jQuery plugin is developed by baijs.nl. For more Advanced Usages, please check the demo page or visit the official website.