1. INCLUDE JS FILE
<script src="https://cdn.rawgit.com/andrepolischuk/circlr/1.2.0/circlr.min.js"></script>
2. HTML
<div id="circlr">
<img data-src="images/00.jpg">
<img data-src="images/01.jpg">
<img data-src="images/02.jpg">
<img data-src="images/03.jpg">
<img data-src="images/04.jpg">
<img data-src="images/05.jpg">
<img data-src="images/06.jpg">
<img data-src="images/07.jpg">
<img data-src="images/08.jpg">
<img data-src="images/09.jpg">
<img data-src="images/10.jpg">
<img data-src="images/11.jpg">
<img data-src="images/12.jpg">
<img data-src="images/13.jpg">
<img data-src="images/14.jpg">
<img data-src="images/15.jpg">
<div id="loader"></div>
</div>
3. JAVASCRIPT
var crl = circlr('circlr', {
scroll : true,
loader : 'loader'
});
4. OPTIONS
Create object with parameters:
var crl = circlr(element, options);
element
DOM element id
options
Parameters object
options.mouse : Rotation via mouse moves (default true)
options.scroll : Rotation via scroll (default false)
options.vertical : Moves vertical orientation (default false)
options.reverse : Reverse rotation (default false)
options.cycle : Ciclic rotation (default true)
options.start : Start frame (default 0)
options.speed : Frames change speed via circlr.turn(i) (default 50 ms)
options.autoplay : Auto playback of sequence initialization (default false)
options.playSpeed : Sequence playback speed (default 100 ms)
options.loader : DOM preloader id
options.ready : Images loading callback
options.change : Frames change callback (send current frame and frames length in arguments)
5. API
crl.el : Return object DOM node
crl.length : Return object frames length
crl.turn(i) : Animated turn to defined frame i
crl.go(i) : Go to defined frame i
crl.play() : Start sequence playback
crl.stop() : Stop playback
crl.hide() : Hide object DOM node
crl.show() : Show object DOM node
crl.set(options) : Change object parameters after initialization:
-
vertical
-
reverse
-
cycle
-
speed
-
playSpeed
JS Tutorial
