Supports: Chrome, FireFox, Safari, Opera, IE7, IE8, IE9, IE10, IE11

Demos

Default Setting

Horizontal mode

  • banner image
  • banner image
  • banner image
  • banner image
  • banner image
  • banner image


Multiple calls

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15


Example sensitivity to resize, resize your window for start it!


  • 1
  • 2
  • 3
  • 4
  • 5

Vertical mode


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

Example with destruction


  • banner image
  • banner image
  • banner image
  • banner image
  • banner image
  • banner image

Example with control buttons


  • banner image
  • banner image
  • banner image
  • banner image
  • banner image
  • banner image


Getting Started

1. Load jQuery and include carouselTicker's plugin files

After you download carouselTicker, move carouselTicker.css and jquery.carouselTicker.js to you root's CSS and Javascript directories. Next, load JQuery and include carouselTicker CSS and Javascript files inside of your tags:

<head>
...

    <link rel="stylesheet" type="text/css" href="stylesheets/carouselTicker.css" />

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="javascripts/jquery.carouselTicker.js"></script>

...
</head>

2. Set up your HTML

Class Naming carouselTicker based on BEM principles, so we need main element-container with main name for example "carouselTicker", inside tag.carouselTicker__list - that will be container-list with our content items and inside it we can include items like tag.carouselTicker__item

Example HTML

<div class="carouselTicker">
    <ul class="carouselTicker__list">
            <li class="carouselTicker__list">1</li>
            <li class="carouselTicker__list">2</li>
            ...
            <li class="carouselTicker__list">n</li>
    </ul>
</div>

3. Activate carouselTicker

The last thing we have to do is activate the plugin. To do this, add the following script right before your closing </head> tag

<head>

    ...

    <script>
        $(document).ready(function() {
            $('.carouselTicker').carouselTicker();
        });
    </script>
</head>

Customizing carouselTicker Functionality

carouselTicker options gives you a wide range of variables(in future ;) ) to tweak functionality. To learn more about all of the options, read the Options section. Here's just a few of the things you can play with:

$('.carouselTicker').carouselTicker({
   speed: 5,
   delay: 50,
   reverse: true
});

Options

3. Activate carouselTicker

mode string Determines vertical or horizontal direction carouselTicker. Default: "horizontal"
speed integer Determines speed rotate the carouselTicker. Default: 1
delay integer This is parameter determines speed the carouselTicker. Default: 30
reverse boolean Determines direction carouselTicker. Default: false
onCarouselTickerLoad function Called after the carouselTicker has been load.

Advanced

The CarouselTicker API

The CarouselTicker API was created to be as flexible and easy to use as possible. The API allows you to create custom triggers, to be sensitivity to resize, destroy CarouselTicker functionality if needed.

Here is a quick look at all of the API methods:

// set callback on load carouselTicker
$(...).carouselTicker('onCarouselTickerLoad':  function() { callback });

// set resize handler on carouselTicker
$(window).on('resize', function() {
    $(...).carouselTicker().resizeTicker();
});

// destroy carouselTicker
$(...).carouselTicker().destructor();

// reload carouselTicker
$(...).carouselTicker().reloadCarouselTicker();

// stop carouselTicker
$(...).carouselTicker().stop();

// run carouselTicker
$(...).carouselTicker().run();

// run to left/up direction carouselTicker
$(...).carouselTicker().prev();

// run to right/down direction carouselTicker
$(...).carouselTicker().next();