c2-arrow-buttons
v2.3.1
Published
This module builds "next" and "previous" buttons and emits an update whenever the index changes.
Downloads
3
Readme
arrow-buttons
This module builds "next" and "previous" buttons and emits an update whenever the index changes. If the index changes outside of this module, it is important to notify this module of the new index.
ES5 polyfills needed for Array.forEach
.
To get started
CommonJS
$ npm install c2-arrow-buttons
var ArrowButtons = require('c2-arrow-buttons');
Browser Global
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="TheC2Group/event-handler.js"></script>
<script src="standalone/arrow-buttons.js"></script>
Basic example
// The max is typically the array length minus 1
var max = 5;
// This wouldn't be necessary since all these options are the defaults
var options = {
previousHTML: '<a href="#" class="previous"><span class="Hidden">Go to previous item</span></a>',
nextHTML: '<a href="#" class="next"><span class="Hidden">Go to next item</span></a>',
style: 'finite', // 'finite' || 'infinite'
attribute: 'data-status',
enabled: 'enabled',
disabled: 'disabled',
initial: 0
};
var arrows = new ArrowButtons('#parent', max, options);
arrows.on('update', function (index) {
console.log(index);
});
ArrowButtons
Constructor
@param {jQuery} - element that the arrow buttons are appended to
@param {Number} - max value that the index can reach, the min value is always 0
@param {Object} - object to change any of the default options
@return {Object} - instance of ArrowButtons
.setIndex
@param {Number}
@return {Object} - instance of ArrowButtons
.setMax
@param {Number}
@return {Object} - instance of ArrowButtons
.nextIndex
.previousIndex
Events
update:previous
update:next
click:previous
click:next
License
MIT © The C2 Group