carouFredSel

Home: http://caroufredsel.dev7studios.com/

Usage: http://docs.dev7studios.com/jquery-plugins/caroufredsel

Advance Configurations: http://docs.dev7studios.com/jquery-plugins/caroufredsel-advanced#insertitem

HTML:

<div id="thumbs_wrapper">
	<ul id="thumbs">
		<li><a href="#" class=""><img src="" data-thumb="" alt="" title="" /></a></li>
		<li><a href="#" class=""><img src="" data-thumb="" alt="" title="" /></a></li>
	</ul>
</div>
<div class="clearfix"></div>

<a href="#" id="thumbs_nav_left" class="thumbs_nav"></a>
<a href="#" id="thumbs_nav_right" class="thumbs_nav"></a>

CSS:

#thumbs_wrapper{position: relative; overflow: hidden; height: 150px;}

#thumbs{list-style: none;padding:0; margin: 0;}
#thumbs li{width:83px; float: left; margin-right: 3px;}

.thumbs_nav{position: absolute;width: 30px;height: 30px; display: block;background: url(../images/icons.png) no-repeat;z-index: 3;top: 90px;}

#thumbs_nav_left{background-position: -326px -1266px;}
#thumbs_nav_left:hover{background-position: -326px -1305px;}

#thumbs_nav_right{background-position: -382px -1266px; right: 0;}
#thumbs_nav_right:hover{background-position: -382px -1305px;}

 Javascript:

var page_size = 3;
var page_count = Math.ceil($("#news_list").children().size()/page_size);
$("#news_list").carouFredSel({
	direction: 'left', 
	circular: false,
	infinite: false,
	auto 	: false,
	prev	: {	
		button	: "#news .wrapper .bt.prev",
		key		: "left"
	},
	next	: { 
		button	: "#news .wrapper .bt.next",
		key		: "right"
	}, 
	items:{
		visible: page_size
	},
	onCreate: function(data){
		var page = $("#news_list").triggerHandler("currentPage");
		if(page == 0){
			$('#news > .wrapper .prev').hide();
		}
	},
	scroll: {
		onAfter: function(data){
			var page = $("#news_list").triggerHandler("currentPage");

			if(page == 0){
				$('#news > .wrapper .prev').hide();
			}else{
				$('#news > .wrapper .prev').show();
			}

			if((page + 1) == page_count){
				$('#news > .wrapper .next').hide();
			}else{
				$('#news > .wrapper .next').show();
			}
		}
	}
});

 

Trigger Custom Event:

$('#fred').trigger('slideTo', [$(this), index]);

http://stackoverflow.com/questions/15417011/caroufredsel-slideto-slidetopage-events