Slider extending to add indicators/counters

slide-extend.js

// @dependency bananaPeel

$('#compare-slider').on('init.bananaPeel', function(e) {
		e.options.$visible = $(this).parents('.block-compare').find('.visible');
		e.options.visibleMultiplier = 1;
		if (e.options.itemsCount > e.options.itemsToShow) {
			e.options.$visible.find('.visible-display').html(1 + '-' + e.options.itemsToShow + ' of ');
		}
	})
	.on('slide.bananaPeel', function(e) {
		if (e.options.itemsCount > e.options.itemsToShow) {
			// set the high range to start with the items to show - this is the base of our calculations
			var _hR = e.options.itemsToShow;
			if (e.direction === 'next') {
				_hR = (++e.options.visibleMultiplier) * e.options.itemsToShow;
			} else if (e.direction === 'previous') {
				_hR = (--e.options.visibleMultiplier) * e.options.itemsToShow;
			}
			// verify bounds
			if (_hR > e.options.itemsCount) {
				_hR = e.options.itemsCount;
			} else if (_hR < e.options.itemsToShow) {
				_hR = e.options.itemsToShow;
			}
			e.options.$visible.find('.visible-display').html((_hR - (e.options.itemsToShow - 1)) + '-' + _hR + ' of ');
		}
	})
	.bananaPeel({
		'track': '#compare-items',
		'items': '.item',
		'placement': 'outside',
		'itemsToShow': 3,
		'margin': 0
	});