How Can I Make a Div Slider that is iPad Friendly?

January 8, 2012

There are a lot of sliders that can cycle through content that will work on the iPhone.  Many of these being powered by some kind of jQuery plugin.  However, I only found one that will actually include the functionality for the iPad to be able to use it’s swipe based interface. (click and drag to see more content)

Here is a link to the jQuery Simple iPhone-Slide plugin.  It has an excellent tutorial for such an awesome plugin.
http://jquery.hinablue.me/jqiphoneslide/

After including all the needed files, setting up the slider was as easy as the following function.  This is what I used for initialization:

$(document).ready(function() {

	$('#album').iphoneSlide({
		handler: "#slidePaging",
		pageHandler: ".slidePage",
		nextPageHandler : '.nextPage',
		prevPageHandler : '.prevPage',
		autoPlayTime: 9000,
		bounce: false,
                autoPlay: false,
		pager: {
	        pagerType: "dot",
	        selectorName: ".banner_pager",
	        childrenOnClass: "on",
	        slideToAnimated: true
	        },
		autoCreatePager: true,
                onShiftComplete: function(elem, page) {
                }
	});
});

Stay in Touch!

Subscribe to our newsletter.

Solutions Architecture

browse through our blog articles

Blog Archive