Jquery MS Carousel 1.9

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!

You want it? Download! 



AttachmentSize
carousel_1_9.zip1.21 MB