Demos

Default Setting

Horizontal mode

Multiple calls

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

Vertical mode

Example with destruction

Example with control buttons

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

Talk

Share thoughts, questions, & bugs!

Head on over to carouselTicker's issue tracker on GitHub: https://github.com/likeclever1/carouselTicker/issues