Namste! Salaam! (This is how we greet in India)

Why again a new jQuery Carousel? Well... I am not competing with another carousel but of course it has so many features.

First of all, It has freedom to use. Use it on DIV, LI or any tag. You can use your own layout. Each carousel can have own look & feel and behavior. Put next/previous button wherever you want or don't put anywhere its up to you. The most important part is; it returns a carousel object and do whatever you want. This is what I call freedom :)
I talk too much. Right? Lets come to the point.

jQuery Carousel Features

• It can be auto slide
• You can play with pause/play method
• It can be start from any counter. Slide starts from zero
• You can directly move to on any counter
• One page can have multiple carousel
• Each carousel can be controlled by their own object
• This is vertical and horizontal enabled
• You can have a callback method.
• One hidden feature will tell you in example. :) Smart?
• It can be nested. Really? See examples
• Very light weight. Just 4 KB
• Like my other plugins... Its free :)

Current Version: 1.9
Dependency: jQuery

How to use?

1. Add following code in your header.

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.msCarousel-min.js"></script>
<link rel="stylesheet" type="text/css" href="css/mscarousel.css" />

I am adding style just for testing purpose.

<style type="text/css">
.box {
	background:#000;
	padding:10px;
	height:200px;
	width:200px;
	margin:0 10px 0 0;
}
.box h1 {
	color:#999999;
	background:#000;
}
</style>

2. This is html.

<div id="mycarousel">
  <div class="box">
    <h1>01</h1>
  </div>
  <div class="box">
    <h1>02</h1>
  </div>
  <div class="box">
    <h1>03</h1>
  </div>
  <div class="box">
    <h1>04</h1>
  </div>
  <div class="box">
    <h1>05</h1>
  </div>
</div>

To make it more interesting, I am adding two buttons for navigation.

<input name="previous" id="previous" type="button" value="Previous" /> 
<input name="next" id="next" type="button" value="Next" />

3. This is last step. Initialize script.

<script type="text/javascript">
$(document).ready(function() {
   mcarousel = $("#mycarousel").msCarousel({boxClass:'div.box', height:200, width:220}).data("msCarousel");
   //add click event
	$("#next").click(function() {
		//calling next method
		mcarousel.next();
	});
	$("#previous").click(function() {
		//calling previous method
		mcarousel.previous();
	});	      
})
</script>

You are done. That's It.

---

Know more about jCarousel

Method & Properties:

  

    
Methods & Properties
    
Description
  
  
Properties
 

    
scrollSpeed
    
To set the scroll speed. If not passed 1 second is a default value. 
  
  

    
autoSlide
    
Make your carousel auto slide. Time given in milliseconds. 
  
  

    
defaultid
    
Start your carousel from specified counter. Default is zero.
  
  

    
width
    
Set your carousel width. Default value is 515.
  
  

    
blockWidth
    
Very useful when your carousel is hidden in first run. So you need to send your block width in that case. 
  
  

    
height
    
Set your carousel height. Default value is 258. 
  
  

    
vertical
    
Make your carousel horizontal or vertical. To make it vertical set this option to true
  
  

    
boxClass
    
This is child items of your carousel. Default is '.set'
  
  

    
messageClass
    
When you want to show a message with each slide. This is hidden feature. 
  
  

    
showMessage
    
When you want to show a message with each slide. This needs to set true
  
  

    
messageOpacity
    
Message holder opacity. Default is 0.8. See example for better clarity. 
  
  

    
loop

    
When loop is true and you call the next() after you reach the last element, you will automatically slide to the first element.
  
  

    
callback
    
Callback method is invoked when animation is done. 
  
 
 
Methods
 
play()
Play the carousel when autoslide is enabled. 
pause()
Pause the carousel when autoslide is enabled. 
next()
Move to next slide. 
previous()
Go to previous slide.
goto(index)
Go to specified slide index. Index starts from zero.
getCurrentID()
Returns current index.
item([index])
Returns all item of the carousel if index is blank otherwise it returns indexed element of the carousel.
forceScroll(position)
Scroll the carousel at any position forcefully. 
getNumbers()
Returns numbers html string. 

Click here to play with demo!

Download! 

https://github.com/marghoobsuleman/jquery-carousel