jQuery Simple iPhone-Slide plugin – Contenido deslizante con soporte touch

jQuery Simple iPhone Slide plugin es una solución para implementar contenido deslizante con soporte para touch screen. Esta implementación permite ser configurada para que el contenido se deslice lateralmente, verticalmente, en una matriz, etc.

Para su implementación son requeridos los siguiente componentes:

• jquery.iphone.slide.js ( 18.5KB)
• jquery.iphone.slide.min.js ( 12.1KB)
• jquery.easing.1.3.min.js ( 5.4KB)

Implementar Simple iPhone Slide verticalmente

Primero es necesario enlazar la bibliotecas en la sección HEAD del HTML de la página.

Segundo hay que configurar el comportamiento de la presentación:

$('#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",
// 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".
}
});

Tercero configurar jQuery

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

Cuarto y quiento, definir los estilos visuales (CSS) y agregar la estructura HTML que lo mostrará:

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

Corolario

jQuery Simple iPhone Slide Plugin no sólo es una solución elegante y sencilla implementar en cualquier desarrollo web, si no que es muy versátil ya que el desarrollador puede configurarlo de muchas formas.

jQuery Simple iPhone Slide Plugin

Sitio: jquery.hinablue.me/jqiphoneslide