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.

  • image 1
  • image 2
  • image 3
  • image 4
  • image 7

$(document).ready(function()
{
    $('#slider1').tinycarousel();
});
  • image 7
  • image 5
  • image 6
  • image 4
  • image 3
  • image 2

$(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
    });
});
  • image 3
  • image 2
  • image 1

$(document).ready(function()
{
    $("#slider5").tinycarousel({
        axis   : "y"
    });
});
  • image 7
  • image 5
  • image 6
  • image 4
  • image 3
  • image 2

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;
    });
});

The generated API docs will be included here.

Usage


$(document).ready(function()
{
    // Initialize a carousel like this.
    //
    $('#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");
    });
});