Swipeview - mostra anteprima/snippet del prossimo oggetto?

Question

Sto usando Swipeview (http://cubiq.org/swipeview) per creare un carousel abilitato al tocco che funziona su un iPhone e Android. Le basi funziona alla grande.

Il mio problema inizia quando provo a farlo visualizzare il 25% del valore predefinito di diapositiva seguente. L'idea è che l'utente possa vedere 1/4 della diapositiva/immagine successiva, che dovrebbe quindi far scorrere l'immagine per rivelare la diapositiva/immagine successiva. La prima immagine scompare, la seconda immagine diventa visibile al 100%, allineata a sinistra e la terza immagine è quindi visibile di 1/4. E così via.

Ho provato a cambiare il div.style.cssText (in swipeview.js) per avere una larghezza di 75% anziché il valore predefinito 100%. Funziona per il caricamento iniziale, ma quando lo scorrimento, la parte della seconda immagine che era visibile sulla diapositiva 1, è ora nascosta sulla diapositiva 2.

Ho fatto un violino per dimostrare: http://jsfiddle.net/zeqjN/1/ (testarlo in Chrome e prova a trascinare l'immagine a sinistra)

Qualche idea su come posso modificare swipeview.js in base alle mie esigenze?

Answer 1

È possibile ottenere questo con solo CSS. Basta aggiungere un effetto di scala sugli oggetti.

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

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