jQuery Simple iPhone-Slide plugin

Needed - jQuery 1.4+

Check it out in the gitHub.

Configuration

$('#album').iphoneSlide({
	// Page items handler, default: the first child of the $('album').
	handler: undefined,
	// Pages handler, default: the children of the handler.
	pageHandler : undefined,
	// Drag area handler, default: full page area.
	slideHandler : undefined,
	// The friction of slide page.
	friction : 0.325,
	// When drag&drop page, the point length must be larger than this value which event will be fire.
	sensitivity : 20,
	// Slow down the page shift speed(ms).
	extrashift : 500,
	// If drag&drop over this time(ms), there will always slide 1 page.
	touchduring : 800,
	// Direction of slide, there are three directions you can choose(horizontal, vertical and matrix).
	direction : 'horizontal',
	// Max slide page.
	maxShiftPage : 5,
	// It's only for dynamic page(s).
	pageshowfilter : false,
	// Support jquery easing plugin, via http://gsgd.co.uk/sandbox/jquery/easing/
    easing: "swing",
    // Turn on/off default animate effect "bounce".
    bounce: true,
	autoPlay: false,
	cancelAutoPlayOnResize: false,
    autoCreatePager: false,
	pager: {
		pagerType: "dot",
        selectorName: ".banner_pager",
        childrenOnClass: "on",
		slideToAnimated: true
	},
	autoPlayTime: 3000,
	// When slide page completed, fire this.
	onShiftComplete : function(elem, page) {
		// this is parent of the handler.
		// elem is nowPage's page item.
		// page is "nowPage".
	}
});

jQuery

$('#album').iphoneSlide({
	handler: "#paging",
	pageHandler: ".page",
    autoPlay: true,
    autoCreatePager: true
});

Style

    #album, .album {
        position: relative;
		width: 450px;
		height: 450px;
		overflow: hidden;
		margin: 0 auto;
		border: 2px solid #ffffff;
		background-color: #000000;
	}

	#paging, .paging {
		position: absolute;
		top: 0px;
		left: 0px;
		width: 450px;
		height: 450px;
	}

	#paging div.page, .paging div {
		float: left;
		width: 440px;
		height: 440px;
		margin: 4px;
		border: 1px solid #666666;
		background-color: #efefef;
		background-position: 50% 50%;
		background-repeat: no-repeat;
		color: #000000;
		text-align: center;
		font-size: 0.85em;
		display: none;
		cursor: pointer;
	}

HTML

	<div id="album">
		<div id="paging">
			<div class="page single" style="background-image: url(./images/08.jpg);"></div>
			<div class="page single" style="background-image: url(./images/09.jpg);"></div>
			<div class="page single" style="background-image: url(./images/10.jpg);"></div>
			<div class="page single" style="background-image: url(./images/11.jpg);"></div>
			<div class="page single" style="background-image: url(./images/12.jpg);"></div>
			<div class="page single" style="background-image: url(./images/13.jpg);"></div>
			<div class="page single" style="background-image: url(./images/14.jpg);"></div>
		</div>
	</div>

DEMO, Default: "Horizontal-slide", with different size pages.

Element data in jQuery

// worksapce Data Object, DO NOT MODIFY if you don't know what you do.
var workspaceData = $("#album").data("iphoneslide"); 
// Total pages you have, DO NOT MODIFY if you don't know what you do.
var totalPage = parseInt(workspaceData.totalPages);
// Use for "matrix-slide", DO NOT MODIFY if you don't know what you do.
var matrixSqrt = parseInt(workspaceData.matrixRow);
// Use for "matrix-slide", DO NOT MODIFY if you don't know what you do.
var matrixColumn = parseInt(worksapceData.matrixColumn);
// Default "now page" where you are, DO NOT MODIFY if you don't know what you do.
var nowPage = parseInt(workspaceData.nowPage);
// The plugin setup completed or not, DO NOT MODIFY if you don't know what you do.
var initIphoneSlide = workspaceData.initIphoneSlide;
// Total width with all the pages, DO NOT MODIFY if you don't know what you do.
var pagesOuterWidth = parseInt(workspaceData.pagesOuterWidth);
// Total height with all the pages, DO NOT MODIFY if you don't know what you do.
var pagesOuterHeight = parseInt(workspaceData.pagesOuterHeight);

DEMO - Vertical-Slide

$('#album').iphoneSlide({
	handler: "#paging",
	pageHandler: ".page",
	direction: "vertical"
});

DEMO - Matrix-Slide

$('#album').iphoneSlide({
	handler: "#paging",
	pageHandler: ".page",
	direction: "matrix"
});

HOWTO - Slide to page

$('#album').iphoneSlide(
    'slide2page',
    3, // Slide to page,
    true // Sliding animate, default: true
);

DEMO, Slide to page

HOWTO - dynamic add pages

$('#album').iphoneSlide(
    'jqipblank2page',
    "blank page", // Your page.
    true, // Jump to your page.
    function() { return false; } // Callback function.
);
// Singal page.
$('#album').iphoneSlide('blank2page',"blank page");
// Multi pages.
$('#album').iphoneSlide('blank2page', ["blank page 1", "blank page 2"]);

DEMO, add 3 blank pages

HOWTO - Infinite sliding pages

WARNING! This sample only for "maxShiftPage" is 1.

$('#album').iphoneSlide({
	maxShiftPage : 1,
	handler: ".paging",
	pageHandler: ".page",
 	onShiftComplete: function(elem, page) {
		var ahead = this.handler.children(':first');
		var behind = this.handler.children(':last');

		if (this.fakePage + this.options.maxShiftPage >= this.totalPages) {
			behind.after(ahead);
			var shift = this.pagesHandler.eq(this.fakePage - 1).position().left;
			shift -= (this.workspace.width() - this.pagesHandler.eq(this.fakePage - 1).outerWidth(true)) / 2;	
			this.handler.css('left', shift * -1);
			this.fakePage = this.fakePage - 1;
		} else if (this.fakePage - this.options.maxShiftPage === 0) {
			ahead.before(behind);
			var shift = this.pagesHandler.eq(this.fakePage - 1).position().left;
			shift -= (this.workspace.width() - this.pagesHandler.eq(this.fakePage - 1).outerWidth(true)) / 2;	
			this.handler.css('left', shift * -1);
			this.fakePage = this.fakePage + 1;				
		}

	    if (!this.options.pageshowfilter) {
	      this.pagesHandler = this.handler.children(this.options.pageHandler);
	    } else {
	      this.pagesHandler = this.handler.children(this.options.pageHandler).filter(':visible');
	  	}
	}
});
var ips = $('#album').data('iphoneslide');
var ahead = ips.handler.children(':first');
var behind = ips.handler.children(':last');

ahead.before(behind);

var shift = ips.pagesHandler.eq(ips.fakePage - 1).position().left;
shift -= (ips.workspace.width() - ips.pagesHandler.eq(ips.fakePage - 1).outerWidth(true)) / 2;	

if (!ips.options.pageshowfilter) {
  ips.pagesHandler = ips.handler.children(ips.options.pageHandler);
} else {
  ips.pagesHandler = ips.handler.children(ips.options.pageHandler).filter(':visible');
	}

ips.handler.css('left', shift * -1);
ips.fakePage = 2;

DEMO, infinite sliding pages

UPDATE - jQuery Easing plugin support.

<script type="text/javascript" src="./scripts/jquery-1.6.4.js"></script>
<script type="text/javascript" src="./scripts/jquery.easing.1.3.min.js"></script>
<script type="text/javascript" src="./scripts/jquery.iphone-slide.min.js"></script>
$('#album').iphoneSlide({
	handler: "#paging",
	pageHandler: ".page",
	direction: "matrix",
	easing: "easeOutBounce"
});

DEMO, jQuery Easing plugin, use "easeOutBounce" effect.

Do more you can!