Tiny Carousel: A lightweight jQuery carousel for sliding html based content.

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 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
Source is on GitHub

Examples

If you need some more (advanced) examples you can find them here.

<

>


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

<

>

1
2
3
4
5
6


$(document).ready(function()
{
    $("#slider3").tinycarousel({
        bullets  : true
    });
});

Nicknamed "The Imp", Tyrion Lannister is the younger brother of Cersei and Jaime Lannister. He is a dwarf; and his mother died during his birth, for which his father, Tywin Lannister, blames him. While not physically powerful, Tyrion has a cunning mind and often uses to his advantage the fact that others constantly underestimate him. Initially, Tyrion bears the Starks no ill will, but after being wrongly captured and put on trial for the crime of murdering Jon Arryn and conspiring to kill Bran Stark, both of which he had no hand in or knowledge of, his ire toward Lady Catelyn prompts him to join his father's war against the Starks.
Daenerys Targaryen is the exiled princess of the Targaryen dynasty. Also called "the Stormborn", she and her brother Viserys were smuggled to Essos during the end of Robert's Rebellion. For seventeen years, she has been under Viserys' care whom she fears, as he is abusive to her whenever she displeases him. In exchange for an army, Viserys marries her to the powerful Dothraki warlord Khal Drogo, making her a Khaleesi, a queen of the Dothraki. Daenerys is at first afraid of her new husband but after learning the Dothraki language, she manages to get past their barriers.
Jon Snow is the bastard son of Ned Stark who joins the Night's Watch. Jon is a talented fighter, but his sense of compassion and justice brings him into conflict with his harsh surroundings. Ned claims that Jon's mother was a wet nurse named Wylla. His direwolf is called Ghost due to his albinism and quiet nature. Jon soon learns that the Watch is no longer a glorious order, but is now composed mostly of society's rejects, including criminals and exiles. Initially, he has only contempt for his low-born brothers of the Watch, but he puts aside his prejudices and befriends his fellow recruits, especially Sam Tarly, after they unite against the cruel master-at-arms.


$(document).ready(function()
{
    $("#slider4").tinycarousel({
        bullets   : true
    ,   buttons   : false
    ,   animation : false
    });
});

Up

Down


$(document).ready(function()
{
    $("#slider5").tinycarousel({
        axis   : "y"
    });
});

<

>

Goto slide 4

Stop autoplay

Start autoplay


$(document).ready(function()
{
    $("#slider7").tinycarousel({ interval: true });

    var slider7 = $("#slider7").data("plugin_tinycarousel");

    // The move method you can use to make a
    // anchor to a certain slide.
    //
    $('#gotoslide4').click(function()
    {
        slider7.move(4);

        return false;
    });

    // The start method starts the interval.
    //
    $('#startslider').click(function()
    {
        slider7.start();

        return false;
    });

    // The stop method stops the interval.
    //
    $('#stopslider').click(function()
    {
        slider7.stop();

        return false;
    });
});

Constructor

tinycarousel ( options )

options Object
- start = 0 Number optional
  
  The slide to start with.
- axis = x String optional
  
  Vertical or horizontal scroller? ( x || y ).
- buttons = true Boolean optional
  
  Show previous and next navigation buttons.
- bullets = false Boolean optional
  
  Is there a page number navigation present?
- interval = false Boolean optional
  
  Move to another block on intervals.
- intervalTime = 3000 Number optional
  
  Interval time in milliseconds.
- animate = true Boolean optional
  
  False is instant, true is animate.
- animationTime = 1000 Number optional
  
  How fast must the animation move in ms?
- infinite = true Boolean optional
  
  Infinite carousel.

Properties

_defaults	Object private	Default: defaults
_name	String private final	Default: 'tinycarousel'
intervalActive	Boolean	If the interval is running the value will be true. Default: false
options	Object	The options of the carousel extend with the defaults. Default: defaults
slideCurrent	Number	The index of the current slide. Default: 0
slidesTotal	Number	The number of slides the carousel is currently aware of. Default: 0

Methods

_initialize ()

_setButtons ()

_setEvents ()

move ( index )

Move to a specific slide.

index Number optional

The slide to move to.

start ()

If the interval is stoped start it.

start ()

If the interval is running stop it.

update ()

You can use this method to add new slides on the fly. Or to let the carousel recalculate itself.

Events

move

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

Usage


$(document).ready(function()
{
    // Initialize a carousel like this.
    //
    var $box = $('#box');
    $box.tinycarousel();

    // Try this to get access to the actual carousel instance.
    //
    var box = $box.data("plugin_tinycarousel");

    // Now you have access to all the methods and properties.
    //
    // box.update();
    // 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");
    });
});