• Publicidad
  • Contacto
Pixelco Tech News
  • 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
  • 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
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
jQuery Simple iPhone Slide plugin
Compartir en FacebookCompartir en TwitterCompartir en WhatsappCompartir en TumblrCompartir en Telegram

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:

  • 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.

Contenidorelaciondo

Samsung muestra la evolución de SmartThings y presenta nuevas experiencias de dispositivos en SDC22

18/10/2022

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

12/04/2022

Ventajas, desventajas y consejos al crear tu sitio web

28/02/2022

Samsung e IBM lanzan el reto “Call for Code”para homenajear a los héroes de la vida

09/11/2021

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, Desarrollador de Software y UX Designer 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

Contenido Relacionado

Noticias

Samsung muestra la evolución de SmartThings y presenta nuevas experiencias de dispositivos en SDC22

18/10/2022
Recursos

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

12/04/2022
Transformación Digital

Ventajas, desventajas y consejos al crear tu sitio web

28/02/2022
Cargar más

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.

  • Contacto
  • Publicidad
  • Sobre Pixelco
  • Política de Privacidad

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

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

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

Welcome Back!

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In

Add New Playlist

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...