Карусель

HTML

<div class="slider">
<div class="back"></div>
  <div class="p_img_tmb">
    <div class="tmbcont">
      <div>
        <img src="http://intestate.ru/images/osproperty/properties/thumb/24851379810919723632e73980612c8dba126206b023b5.jpg"
        />
      </div>
      <div>
        <img src="http://intestate.ru/images/osproperty/properties/thumb/248513798109192552b3aea5a54fafe51c52a5f35ede61.jpg"
        />
      </div>
      <div>
        <img src="http://intestate.ru/images/osproperty/properties/thumb/24851379810919bb7f839b20d629436fe98b3467425551.jpg"
        />
      </div>
      <div>
        <img src="http://intestate.ru/images/osproperty/properties/thumb/248513798109207434829bfe4f8276477310b65d61a40e.jpg"
        />
      </div>
      <div>
        <img src="http://intestate.ru/images/osproperty/properties/thumb/24851379810920c5b74e200a815caf53b93bd9d9344a2b.jpg"
        />
      </div>
      <div>
        <img src="http://intestate.ru/images/osproperty/properties/thumb/24851379810920c6b37ef055e360fb56c19039a5790101.jpg"
        />
      </div>
    </div>
  </div>
<div class="next"></div>
</div>

CSS

.p_img_tmb{width:372px; height: 100px; float: left; overflow: hidden; position: relative;}
.back, .next{width: 13px; height: 100px; float: left; cursor: pointer;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAWCAYAAADeiIy1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAZ1JREFUeNq0VbFOAkEQvbvQ2EllpCEkUJBYqN9AxQ8YW6GzsOYTbAgWdncdCbH0E6zopKTgkNhorLSjMVnfkEHXvZvZJcZJXuYyNzvvZnbfbWyMiTSLs9Ue3BVwANyaXiPneBPuEngDbhBfq3U0IhSrwFHhuhWusn+3Ys9AE2SfUq1EIYnhxg4J2THDNsoZ85pwIl4wAc6icKPciURWGJ2HZDMifs5LuiW7A84xRuPraKiQtGkfeC/aHCvrbKh2hG56cKkwmioIPpzu951DYVsf+VmhIw9JyyUh41hLWJNyzR+iAJJcOgH8zksWR+nTIfyLkHiKQrOQI4eCJ3CPwusaddRVZjwLPduc2xded4loGf2/LWl0FUUT6v44oyN9LSTtJR5NLLjAX0g22vvWEf+l50JnNSS/CiTSYdqSrH/piAMd4aOn/CFlV8hUWNOxr44kUBPU5dwm80ygsLel95GiCRpHg59XAkmp9pIdNUGFLxj1XbSXKALMBLIjhvoTDSayyAZO+J5h20Aj8RKxXVudjYAHxmjbCeeo9iXAAE0Vvbq4+3lOAAAAAElFTkSuQmCC') no-repeat;
}
.back{ background-position: 0 center;}
.next{ background-position: -13px center;}
.tmbcont{position: absolute; width: auto; height: 100px;}
.p_img_tmb>div{float: left; overflow: hidden;}
.tmbcont>div{float: left; width: 120px; overflow: hidden; margin:2px;}

JavaScript

jQuery(function (f) {
	var first = 0,
		move = function (el, x) {
			el.animate({
				left: (x ? ++first : --first) * -124
			}, 500);
		};
	f('div.slider').each(function () {
		var el = f(this).find('.tmbcont'),
			len = f(el).find('img').length,
			reverse = 0,
			tid, startSlider = function () {
				tId = setInterval(function () {
				console.log(first);
					if ( first <= 0 || len - first <= 3) {
						reverse = reverse ? 0 : 1;
					}
					move(el, reverse);
					console.log(first);
				}, 3000);
			};
		f(this).hover(function () {
			tId && clearInterval(tId);
			tid = 0;
		}, startSlider)
			.find('.back').on('click',function () {
				len - first > 3 && move(el, 1);
			}).end().find('.next').on('click', function () {
				first && move(el, 0);
			});
		startSlider();
	});
});