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) {
}
});
});