$('#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,
// You can define an element to handle this event(default: click) slide to next page.
nextPageHandler : '.nextPage',
// You can define an element to handle this event(default: click) slide to previous page.
prevPageHandler : '.prevPage',
// 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: true,
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".
}
});
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("workData");
// 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);