slide demo

slide.html

<!-- 
	better name: wrapper -> roll 
-->
<div class="slides">
	<div class="wrapper">
		<div class="slide">
			<img src="images/order-1.jpg" alt="" class="thumb" />
		</div>
		<div class="slide">
			<img src="images/order-2.jpg" alt="" class="thumb" />
		</div>
		<div class="slide">
			<img src="images/order-3.jpg" alt="" class="thumb" />
		</div>
	</div>
	<div class="triggers">
		<div class="prev-trigger prev-disable"></div>
		<div class="next-trigger"></div>
	</div>
</div>

slide.js

/**
 * Abstract: 
 *  move: {int} step number
 *  classes: prev-trigger, next-trigger, prev-disable, next-disable
 */
$('.slides').on('click', '.triggers', function (e) {
	var $trigger = $(e.target);
	var $wrapper = $(this).prev();
	var $slides = $wrapper.children('.slide');
	var total = $slides.length;
	var move = 2;
	var offset = $slides.outerWidth() + parseInt($slides.css('margin-left')) + 
			parseInt($slides.css('margin-right'));
	var passedOffset = parseInt($wrapper.css('margin-left'))
	var passed = -passedOffset / offset;
	if ($trigger.hasClass('next-trigger')) {
		if (total - passed > move) {
			$wrapper.animate({
				'margin-left': -offset * move + passedOffset
			}, function () {
				if (total - passed - move <= move) {
					// stop
					$trigger.addClass('next-disable');
				}
			});
			$trigger.siblings().removeClass('prev-disable');
		}
	}
	else if($trigger.hasClass('prev-trigger')) {
		if (passed > 0) {
			$wrapper.animate({
				'margin-left': offset * move + passedOffset
			}, function () {
				if (passed - move === 0) {
					// stop
					$trigger.addClass('prev-disable');
				}
			});
			$trigger.siblings().removeClass('next-disable');
		}
	}
});

slide.scss

.slides {
	position: relative;
	height: 63px;
	overflow: hidden;
}
.slide {
	float: left;
	margin-left: 16px;
}
$iconWidth: 10px;
$iconHeight: 15px;
.triggers {
	width: 100%;
	position: absolute;
	left: 0;
	top: 50%;
	margin-top: -@iconHeight;
	.next-trigger, .prev-trigger {
		width: $iconWidth;
		height: $iconHeight;
		cursor: pointer;
	}
	.next-trigger {
		float: right;
		@include sprites-service-sprite(icon-next-arrow-active);
	}
	.prev-trigger {
		float: left;
		@include sprites-service-sprite(icon-prev-arrow-active);
	}
	.next-disable {
		@include sprites-service-sprite(icon-next-arrow);
	}
	.prev-disable {
		@include sprites-service-sprite(icon-prev-arrow);
	}
}

// IE styles
.lt-ie8 {
	.wrapper {
		width: 1000%;
	}
}
.lt-ie7 {
	.slides {
		width: 100%;
	}
	.slide {
		margin-left: 8px;
	}
}