Tiny Carousel

• Home
• Tiny Scrollbar
• Tiny Circleslider
• Follow me on Twitter

What is it?

Tiny Carousel is a lightweight carousel for sliding html based content. It was built using the javascript jQuery library. Tiny Carousel was designed to be a dynamic lightweight utility that gives webdesigners a powerfull way of enhancing a websites user interface.

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

Need support or custom features?

Anything is possible! For a small fee i can help you implement the script in your project. Missing any features? I can build them for you!!

Examples

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

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

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

$('#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;
});
                    

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

<div id="slider-code">
    <a class="buttons prev" href="#">left</a>
    <div class="viewport">
        <ul class="overview">
            <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>
                    

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="images/picture7.jpg"></li>
            <li><img src="images/picture5.jpg"></li>
            <li><img src="images/picture6.jpg"></li>
            <li><img src="images/picture4.jpg"></li>
            <li><img src="images/picture3.jpg"></li>
            <li><img src="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);
    }
});