• Publicidad
  • Contacto
Pixelco Tech Blog
  • Noticias
  • Video
  • Tecnología
    • Audio & Video
    • LifeStyle
    • Transformación Digital
  • Ciencia
    • Ciencia Ficción
  • Fotografía
  • Internet
    • Desarrollo/programación
    • Diseño
Sin resultados
Ver todos los resultados
Pixelco Tech Blog
  • Noticias
  • Video
  • Tecnología
    • Audio & Video
    • LifeStyle
    • Transformación Digital
  • Ciencia
    • Ciencia Ficción
  • Fotografía
  • Internet
    • Desarrollo/programación
    • Diseño
Sin resultados
Ver todos los resultados
Pixelco Tech Blog
Sin resultados
Ver todos los resultados

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

Diego CambiasoporDiego Cambiaso
06/03/2018
enDesarrollo/programación, Internet
Tiempo de lectura2 minutos
0

jQuery Simple iPhone Slide plugin

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:

EntradasRelacionados

4 Tips de Oracle para iniciarte en el mundo de la programación

Ventajas, desventajas y consejos al crear tu sitio web

  • 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

Tags: aplicaciones webCSSdesarrollo webhtmlJavascriptjQueryplugin jqueryprogramacion webslideshowSoftware libre
Diego Cambiaso

Diego Cambiaso

Comunicador Social y Desarrollador de Software. Blogger desde el 2006, creador de Pixelco Tech News. Viajero y fotógrafo. Entusiasta del diseño, apasionado por la tecnología y el social media. EN-ES-IT

RelacionadoEntradas

WixCcode

WixCode una moderna herramienta para desarrollo web

07/05/2018
Crédito: Walt Disney Animation Studios y Walt Disney Pictures

Construir un Sitio web con los editores de WYSIWYG: Pros y Cons

12/07/2016

Template Vamp – Descubre una plantilla gratuita en HTML5 y CSS3

02/11/2014
Simite - Game Screenshot

Simite – El campo de batalla de los dioses, un MOBA de acción en tercera persona

15/09/2014

+TV by Members una aplicación de fidelización en la que pertenecer tiene beneficios

24/05/2022

Business TV la solución de Samsung para mostrar contenido personalizado en los televisores de tu negocio

19/05/2022

Huawei lanza el nova Y70, el smartphone que se convierte en power bank

17/05/2022

Bespoke: la nueva línea de neveras modulares y personalizables

13/05/2022

Nuevos audífonos Xiaomi Buds 3 y Xiaomi Buds 3T Pro

05/05/2022

Nueva Series 12 de Xiaomi – Detalles y ficha técnica

05/05/2022

Pixelco Tech

Pixelcoes sitio de noticias de tecnología, diseño y desarrollo web e Internet escrito por profesionales.

Objetivo de Pixelco

Informar, promocionar, proporcionar recursos y ayuda sobre el diseño y desarrollo web, estándares, Internet y tecnología.

Buscar

Sin resultados
Ver todos los resultados

© 2022 Pixelco Tech News - Internet & Tecnología - Por Diego Cambiaso.

  • Publicidad
  • Contacto
  • Política de Privacidad
  • Sobre Pixelco
  • Internet
    • Recursos
    • Diseño
    • Desarrollo/programación
  • Tecnología
  • Noticias
  • Fotografía

© 2022 Pixelco Tech News - Internet & Tecnología - Por Diego Cambiaso.

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies Política de privacidad.
 

Cargando comentarios...