Easy customizable jQuery Carousel Plugin - Tiny Carousel
File Size: | 122KB |
---|---|
Views Total: | 11793 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.