2012-06-22 13 views
8

Estoy usando Swipeview (http://cubiq.org/swipeview) para crear un carousel táctil habilitado que trabaja en un iPhone y Android. Lo básico funciona muy bien.Swipeview - ¿muestra vista previa/fragmento del siguiente artículo?

Mi problema comienza cuando intento mostrar el 25% de la siguiente diapositiva pr predeterminada. La idea es que el usuario pueda ver 1/4 de la siguiente diapositiva/imagen, que luego debe hacer que deslice la imagen para revelar la siguiente diapositiva/imagen. La primera imagen luego desaparece, la segunda imagen se vuelve 100% visible, alineada a la izquierda, y la tercera imagen es visible por 1/4. Y así.

He intentado cambiar la div.style.cssText (en swipeview.js) para tener una anchura de 75% en lugar del predeterminado 100%. Esto funciona para la carga inicial, pero cuando me desplazo, la parte de la segunda imagen que estaba visible en la diapositiva 1, ahora está oculta en la diapositiva 2.

Hice un violín para demostrar: http://jsfiddle.net/zeqjN/1/ (pruébelo en Chrome y intente arrastrar la imagen a la izquierda)

¿Alguna idea sobre cómo puedo modificar swipeview.js para que se ajuste a mis necesidades?

+0

así? http://dimsemenov.com/plugins/royal-slider/visible-nearby/ – Varinder

Respuesta

0

Puede lograr esto solo con CSS. Solo agrega un efecto de escala en los artículos.

.scroller .scroll-item { float: left; -webkit-transform: scale3d(1.1,1.1,1.1) } 

Salida: http://jsfiddle.net/frapporti/Xt9dM/

Cuestiones relacionadas