Install via NPM.
npm install rocket-flicker
Note that this module has a dependency Rocket Tools (28kb) which will automatically be installed as well.
Start by including the necessary files.
<head>
<link href="node_modules/rocket-flicker/css/flicker.min.css" rel="stylesheet" type="text/css">
</head>
<body>
/* Your content goes here */
<script src="node_modules/rocket-tools/js/tools.min.js"></script>
<script src="node_modules/rocket-flicker/js/flicker.min.js"></script>
</body>
See the setup of the HTML and Javascript call below.
<div class="mod-flicker">
<ul>
<li data-background="image-url.jpg">
<div class="mod-flicker-title">Example Heading</div>
<div class="mod-flicker-text">Sub Text</div>
</li>
<li data-background="image-url.jpg">
<div class="mod-flicker-title">Example Heading</div>
<div class="mod-flicker-text">Sub Text</div>
</li>
</ul>
</div>
<script>
Rocket.flicker();
</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 (Rocket Flicker comes with a copy). For example.
<body>
/* Your content goes here */
<script src="node_modules/rocket-flicker/js/hammer-v2.0.3.min.js"></script>
<script src="node_modules/rocket-tools/js/tools.min.js"></script>
<script src="node_modules/rocket-flicker/js/flicker.min.js"></script>
</body>
For a more detailed look into the available options, you can read the documentation at https://github.com/chrishumboldt/Rocket-Flicker