You can either download a copy of the source files or install Flickerplate via Bower.
bower install flickerplate
Start by including the necessary files.
<head>
<link href="css/flickerplate.css" rel="stylesheet" type="text/css">
</head>
<body>
/* Your content goes here */
<script src="js/min/flickerplate.js"></script>
</body>
See the setup of the HTML and Javascript call below.
<div class="flicker-example">
<ul>
<li data-background="image-url.jpg">
<div class="flick-title">Example Heading</div>
<div class="flick-sub-text">Sub Text</div>
</li>
<li data-background="image-url.jpg">
<div class="flick-title">Example Heading</div>
<div class="flick-sub-text">Sub Text</div>
</li>
</ul>
</div>
<script>
new flickerplate({
selector: '.flicker-example'
});
</script>
There are options that you can set. Read the more detailed documentation to find out more.
To make your flicker touch enabled, just included the Hammer library (Flickerplate comes with a copy). For example.
<body>
/* Your content goes here */
<script src="js/min/hammer-v2.0.3.js"></script>
<script src="js/min/flickerplate.js"></script>
</body>
For a more detailed look into the available options, you can read the documentation at https://github.com/chrishumboldt/Flickerplate