Get the Plugin

You can download Flickerplate as a zip file directly or for the latest version get it via Github. Note that this plugin is included within Webplate by default.

Bower Install

This plugin has been registered on Bower and will install the latest stable release. You can do so by running the following command.

bower install flickerplate

Getting Started

This plugin is by definition a jQuery plugin and so is required. It also requires Modernizr for touch detection and the Hammer.js library for touch events. Both jQuery and a custom build of Modernizr are supplied in the zip package.

See an example below of a basic include.

<head>
    // Required javascript
    <script src="js/min/jquery-v1.10.2.min.js"></script>
    <script src="js/min/modernizr-custom-v2.7.1.min.js"></script>
    <script src="js/min/hammer-v2.0.3.min.js"></script>
	
    // Flickerplate
    <script src="js/min/flickerplate.min.js"></script>
    <link href="css/flickerplate.css" rel="stylesheet" type="text/css">
</head>

Executing Flickerplate

The plugin is executed via Javascript and can be called on any containing class as long as the inner HTML is correct. See an example of both below.

HTML

<div class="flicker-example">
    <ul>
        <li>
            <div class="flick-title">Title 1</div>
            <div class="flick-sub-text">Text line 1</div>
        </li>
        <li>
            <div class="flick-title">Title 2</div>
            <div class="flick-sub-text">Text line 2</div>
        </li>
        <li>
            <div class="flick-title">Title 3</div>
            <div class="flick-sub-text">Text line 3</div>
        </li>
    </ul>
</div>

JAVASCRIPT

<script>
$(document).ready(function()
{	
    $('.flicker-example').flickerplate();
});
</script>

Options

Flickerplate is configurable through a variety of ways. You can either setup the options through the Javascript call or you can set the options via data attributes on the actual element. Some options can even be set globally and on each list item.

Option Default JS Data Explanation
Arrows true arrows arrows Arrows are used to navigate back and forth between the flicks.
Arrows Constraint false arrows_constraint arrows-constraint When you get to the end of the flicks pressing the next arrow will navigate you to the beginning again should you have a false constraint. The same applies to the previous arrow.
Auto Flick true auto_flick auto-flick Sets the flick to run automatically. A manual flick resets the delay.
Auto Flick Delay 10 auto_flick_delay auto-flick-delay Set the delay (in seconds) between each auto flick.
Background Image background Set a background image for a particular list item. The image will cover the entire element and is set on a list item level only.
Block Text true dot_navigation dot-navigation Add a background colour to the text.
Dot Alignment center dot_alignment dot-alignment Set the horizontal alignment of the dots to either left, center or right.
Dot Navigation true dot_navigation dot-navigation Dot navigation is used to indicate and navigate between the flicks.
Flick Animation transition-slide flick_animation flick-animation Choose the animation type you want. Options are transition-slide, transform-slide, jquery-slide, scroller-slide, transition-fade, jquery-fade. Transform is used on mobile devices by default.
Flick Position 1 flick_position flick-position Set the starting flick.
Theme light theme theme Currently two options, light and dark. This will set the font colour, block text colour, arrows and dots to either dark or light. Can be applied to the containing class for a global effect or to each list item seperately.

 

JAVASCRIPT EXAMPLE

<script>
$(document).ready(function()
{
    $('.flicker-example').flickerplate(
    {
        arrows: true,
        arrows_constraint: false,
        auto_flick: true,
        auto_flick_delay: 10,
        block_text: true,
        dot_alignment: 'center',
        dot_navigation: true,
        flick_animation: 'transition-slide',
        flick_position: 1,
        theme: 'light'
    });
});
</script>

DATA ATTRIBUTE EXAMPLE

<div class="flicker-example" data-auto-flick-delay="6" data-dot-alignment="left" data-theme="light">
    <ul>
        <li data-block-text="false">
            <div class="flick-title">Title 1</div>
            <div class="flick-sub-text">Text line 1</div>
        </li>
        <li data-theme="dark">
            <div class="flick-title">Title 2</div>
            <div class="flick-sub-text">Text line 2</div>
        </li>
        <li data-background="images/some-background.png">
            <div class="flick-title">Title 3</div>
            <div class="flick-sub-text">Text line 3</div>
        </li>
    </ul>
</div>

In the above example we show how you can mix options like theme and block text between a global setting and a per list item setting.