A light weight HTML presentation framework
You should use files under dist/
folder for productions, files under build/
folder is only for developement purpose.
Be sure you have install the gulp-cli
at first
$ npm install --global gulp
install all dependencies:
$ npm install
build the developement version of Presentr.js
$ gulp build
The result is available in build/
folder.
After you have made; build:
$ gulp dist
Distributalble version will available in dist/
folder.
You can run the demo if you have build the files
$ gulp server
The HTML structure should; be:
<div id="presentr">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
Use Presentr like this:
var presentr = new Presentr(document.querySelector('#presentr'));
The second parameter of the Presentr function is an object for configs:
offsetWidth
of container element) width of the presentationoffsetHeight
of container element) height of the presentation'left'
will prevent left guesture, 'right'
will prevent right guesture, true
and 'both'
will prevent both direction.transition-timing-function
'none'
will slide with no animation, 'fade'
will change opacity
value in animation, 'slide'
will change offset value in animationlocation.hash
when change slidesvar presentr = new Presentr(document.querySelector('#presentr'), {
width: 1000,
height: 800,
startIndex: 0,
cycle: true,
speed: 400,
lock: false,
timingFunction: 'ease',
effect: 'fade',
activeClassName: 'active',
navigation: {
elements: document.querySelectorAll('#navigation>li'),
eventType: 'click',
activeClassName: 'nav-active'
},
enableHash: true,
actionArea: document,
onChangeStart: function(targetIndex, prevIndex){
console.log(targetIndex, prevIndex);
},
onChangeEnd: function(index){
console.log(index);
}
});
slides
an array contains all of the slide elementsoptions
reference of the config objectshow(index)
show one of the slide with no animationprev(duration)
go to prevnext(duration)
go to nextgotoSlide(index, duration)
go to one of the slide with effects, duration
is the duration of animationgetIndex()
return the index of active slidelock(direction)
lock the guesture on slides, the direction
value is same as lock in the config objectunLock(direction)
unlock the guesture preventionfullScreen(zIndex)
set presentation size as the size of the viewport, zIndex
will set the z-index
property of container elementcancelFullScreen()
quit the full screen stateisFullScreen
return boolean value, indicate whether the presentation is on full screen statedestory()
recovery the DOM styles and destory the instanceCompatible with most of the modern browsers (Chrome, Firefox, Opera, IE10+), include the moblie platforms.
Copyright (c) 2015 Lin Chen. Licensed under The MIT License (MIT)