Features

  • Can slide vertical or horizontal
  • Supports navigation by button or paging
  • The point where the carousel starts can be set
  • Animation time can be set in milliseconds or to 'instant'
  • Number of block to move at a time can be set
  • A interval can be set to slide automaticaly every given milliseconds
  • Easy customizable
  • Supports all current browsers (Firefox, Internet Explorer 6+, Safari, Opera, Chrome).
  • Dual licensed under the MIT or GPL Version 2 licenses.
  • Lightweight its only 100 lines of code. mimified the size is 2,29 kb

Examples


$('#slider1').tinycarousel();
					

$('#slider2').tinycarousel({ display: 2 });
					

$('#slider3').tinycarousel({ pager: true, interval: true  });
					
  • Tab 1

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet ipsum tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean ipsum nulla.

  • Tab 2

    Integer sed erat sem, id congue nisi. Fusce ut nibh vel urna molestie lobortis id eget orci. Nam semper, lacus quis ornare fringilla, erat tellus sodales ante, quis molestie arcu eros non purus.

  • Tab 3

    Nam sed mi enim. Nulla nec est eget velit rutrum molestie. Aenean blandit, metus ut tempor elementum, enim justo volutpat dolor, at fringilla lacus risus quis nulla.


$('#slider4').tinycarousel({ controls: false, pager: true, animation: false });
					

$('#slider5').tinycarousel({ axis: 'y'});
					

Goto slide 4

Stop autoplay

Start autoplay


var oSlider7 = $('#slider7');

oSlider7.tinycarousel({ interval: true });

//The tinycarousel_move method you can use to make a anchor to a certain slide.
$('#gotoslide4').click(function(){ 
	oSlider7.tinycarousel_move(4);
	return false;
});

//The tinycarousel_start method starts the interval.
$('#startslider').click(function(){ 
	oSlider7.tinycarousel_start();
	return false;
});

//The tinycarousel_stop method stops the interval.
$('#stopslider').click(function(){ 
	oSlider7.tinycarousel_stop();
	return false;
});
					

How to

HTML for a basic carousel like example 1 ( Download example ).

<div id="slider-code">
	<a class="buttons prev" href="#">left</a>
	<div class="viewport">
		<ul class="overview">
			<li><img src="http://baijs.nl/tinycarousel/images/picture3.jpg" /></li>
			<li><img src="http://baijs.nl/tinycarousel/images/picture2.jpg" /></li>
			<li><img src="http://baijs.nl/tinycarousel/images/picture1.jpg" /></li>
		</ul>
	</div>
	<a class="buttons next" href="#">right</a>
</div>
					

CSS


#slider-code { height: 125px; overflow:hidden; }
#slider-code .viewport { float: left; width: 240px; height: 125px; overflow: hidden; position: relative; }
#slider-code .buttons { display: block; margin: 30px 10px 0 0; float: left; }
#slider-code .next { margin: 30px 0 0 10px;  }
#slider-code .disable { visibility: hidden; }
#slider-code .overview { list-style: none; position: absolute; padding: 0; margin: 0; left: 0; top: 0; }
#slider-code .overview li{ float: left; margin: 0 20px 0 0; padding: 1px; height: 121px; border: 1px solid #dcdcdc; width: 236px;}
					

JS

Add jQuery and the tinycarousel js to the bottom of your head tag. After you have done that add these lines.


<script type="text/javascript">
	$(document).ready(function(){
				
		$('#slider-code').tinycarousel();
		
	});
</script>	
					

HTML for a carousel with a pager


<div id="slider-code">
    <a href="#" class="buttons prev">left</a>
    <div class="viewport">
        <ul class="overview">
            <li><img src="http://baijs.nl/tinycarousel/images/picture7.jpg"></li>
            <li><img src="http://baijs.nl/tinycarousel/images/picture5.jpg"></li>
            <li><img src="http://baijs.nl/tinycarousel/images/picture6.jpg"></li>
            <li><img src="http://baijs.nl/tinycarousel/images/picture4.jpg"></li>
            <li><img src="http://baijs.nl/tinycarousel/images/picture3.jpg"></li>
            <li><img src="http://baijs.nl/tinycarousel/images/picture2.jpg"></li>                            
        </ul>
    </div>
    <a href="#" class="buttons next">right</a>
    <ul class="pager">
        <li><a rel="0" class="pagenum" href="#">1</a></li>
        <li><a rel="1" class="pagenum" href="#">2</a></li>
        <li><a rel="2" class="pagenum" href="#">3</a></li>
        <li><a rel="3" class="pagenum" href="#">4</a></li>
        <li><a rel="4" class="pagenum" href="#">5</a></li>
        <li><a rel="5" class="pagenum" href="#">6</a></li>
    </ul>
</div>
					

CSS


#slider-code { height: 145px; overflow:hidden; }
#slider-code .viewport { float: left; width: 240px; height: 125px; overflow: hidden; position: relative; }
#slider-code .buttons { display: block; margin: 30px 10px 0 0; float: left; }
#slider-code .next { margin: 30px 0 0 10px;  }
#slider-code .disable { visibility: hidden; }
#slider-code .overview { list-style: none; padding: 0; margin: 0;  position: absolute; left: 0; top: 0; }
#slider-code .overview li{ float: left; margin: 0 20px 0 0; padding: 1px; height: 121px; border: 1px solid #dcdcdc; width: 236px;}

#slider-code .pager { overflow:hidden; list-style: none; clear: both; margin: 0 0 0 45px; }
#slider-code .pager li { float: left; }
#slider-code .pagenum { background-color: #fff; text-decoration: none; text-align: center; padding: 5px; color: #555555; font-size: 14px; font-weight: bold; display: block; }
#slider-code .active { color: #fff; background-color:  #555555; }
					

JS

Add jQuery and the tinycarousel js to the bottom of your head tag. After you have done that add these lines.


<script type="text/javascript">			
	$(document).ready(function(){				
				
		$('#slider-code').tinycarousel({ pager: true });
		
	});
</script>	
					

Options

A list of all the available options and there default value

  • 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

Below is a example of a callback. After every move the function is executed and it will return 2 things the current li and its index.


$('#slider-code').tinycarousel({
	callback: function(element, index){
		console.log(element, index);
	}
});
					

Support

There is no support.... but you could always try to mail  to see what happens. If you find any bugs please let me know!