Tiny Carousel

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 powerful way of enhancing a websites user interface.

Features

• Completely rewritten!
• Can slide vertical or horizontal
• AMD, Node, requirejs and commonjs support.
• 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'
• A interval can be set to slide automatically every given milliseconds
• Loops infinitely over its slides.
• Responsive
• Easy customizable
• Lightweight

$(document).ready(function()
{
    $('#slider1').tinycarousel();
});

Initialize options

A list of all the available options and there default value

• start: 1 -- where should the carousel start?
• axis: 'x' -- vertical or horizontal scroller? 'x' or 'y' .
• buttons: true -- show left and right navigation buttons?
• bullets: 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.
• animationTime: 1000 -- how fast must the animation move in milliseconds?
• infinite: true -- infinite carousel.

Properties

$(document).ready(function()
{
    // You can access the methods and properties of your
    // carousel instance straight after initialization.
    //
    $('#box').tinycarousel();

    // This part you can do from whatever place in your
    // code as long as the carousel allready is initialized.
    //
    var box = $('#box').data("plugin_tinycarousel");

    // Now you have access to all the methods and properties.
    //
    // box.update();
    // console.log(box.slideCurrent);
    //
    // etc..
});

• slideCurrent -- The index of the current slide.
• slidesTotal -- The number of slides the carousel is currently aware off.

Methods

• update -- You can use this method to update the carousel if you added new slides on the fly.
• start Start the interval.
• stop -- Stop the interval.
• move -- Move to specific slide. The only param you can supply is the index of the slide.

Events

$(document).ready(function()
{
    var $box = $('#box');
    var box  = $box.tinycarousel();

    $box.bind("move", function()
    {
        console.log("do something on every move to a new slide");
    });
});          

• move -- The move event will trigger when the carousel slides to a new slide.