Basic image slider, procedural style

slider.js

// basic slider, the procedural method
(function($) {

var $sliderNav = $('#slider-nav'),
	$sliderUL = $('div.slider').css('overflow', 'hidden').find('ul'),
	imgs = $sliderUL.find('img'),
	imgWidth = imgs[0].width,
	numOfImgs = imgs.length,
	currentImage = 1,
	totalImgsWidth = imgWidth * numOfImgs;

	$sliderNav.show().children('button').on('click', function() {
		var direction = $(this).data('dir'),
			loc = imgWidth;

		// update current
		(direction === 'next') ? ++currentImage : --currentImage;

		if (currentImage === 0) {
			currentImage = numOfImgs;
			loc = totalImgsWidth - imgWidth;
			direction = 'next';
		} else if (currentImage - 1 === numOfImgs) {
			currentImage = 1;
			loc = 0;
		}

		transition($sliderUL, loc, direction);
	});

	function transition(cont, loc, dir) {
		var unit; // += ? -=

		if (dir && loc !== 0) {
			unit = (dir === 'next') ? '-=' : '+=';
		}

		cont.animate({
			'margin-left': unit ? unit + loc : loc
		});
	}

})(jQuery);