## What is it?

Tinycircleslider is a circular slider / carousel. That was built to provide webdevelopers with a cool but subtle alternative to all those standard carousels. Tiny Circleslider can blend in on any wepage. It was built using the javascript jQuery library.

## Features

- IOS and Android support.
- AMD, Node, requirejs and commonjs support.
- Supports sliding by thumb or pager
- A interval can be set to slide automaticaly every given milliseconds
- Can be set to snap to a page
- Option to fade dots when dragging is done
- Size(radius) of the slider can be set.
- Can fire a callback after every move.
- Easy customizable
- Lightweight
- Source is on GitHub

## 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

    $(document).ready(function()
    {
        $('#circleslider1').tinycircleslider();
    });

    $(document).ready(function()
    {
        $("#circleslider2").tinycircleslider({
            interval : true
        ,   dotsSnap : true
        });
    });

Note: There is no lightbox natively in tiny circleslider for this example fancybox was used.

    $(document).ready(function()
    {
        $("#circleslider3").tinycircleslider({
            dotsSnap : true
        ,   radius   : 170
        ,   dotsHide : false
        });

        $("#circleslider3").find("a").fancybox();

    });

To get a better understanding of how it all comes together I made a (corny) styled example. If someone can make a nicer design it would be greatly appreciated :)

    $(document).ready(function()
    {
        $("#circleslider4").tinycircleslider({
            dotsSnap : true
        ,   radius   : 215
        ,   dotsHide : false
        ,   interval : true
        });
    });

The generated API docs will be included here.

## Usage

    $(document).ready(function()
    {
        // Initialize a slider like this.
        //
        $('#box').tinycircleslider();

        // Try this to get access to the actual slider instance.
        //
        var box = $('#box').data("plugin_tinycircleslider");

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

        // You can bind to the move event like this.
        //
        $box.bind("move", function()
        {
            console.log("do something on every move to a new slide");
        });
    });

The image below displays how you calculate the radius of your circleslider. The center of your slider to the center of the outside circle is your radius.

## License / Source

Tinycircleslider is a free script its licensed under the MIT license. However a donation for my labor of love is greatly appreciated :)