11

I am using Swipeview (http://cubiq.org/swipeview) to create a touch-enabled carousel working on an iPhone and Android. The basics works great.

My problem starts when i try to get it to show 25% of the next slide pr default. The idea is that the user can see 1/4 of the next slide/image, which should then make them slide the image to reveal the next slide/image. The first image then disapears, the second image becomes 100% visible, aligned to the left, and the 3rd image is then visible by 1/4. And so on.

I have tried changing the div.style.cssText (in swipeview.js) to have a width of 75% instead of the default 100%. This works for the initial load, but when i scroll, the part of the 2nd image that was visible on slide 1, is now hidden on slide 2.

I made a fiddle to demonstrate: http://jsfiddle.net/zeqjN/1/ (test it in Chrome and try dragging the image to the left)

Any ideas as to how i can modify swipeview.js to fit my needs?

Raman Mandal
  • 276
  • 1
  • 6
brother
  • 7,651
  • 9
  • 34
  • 58

1 Answers1

0

You can achieve this with css only. Just add a scale effect on the items.

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

Check out: http://jsfiddle.net/frapporti/Xt9dM/

Francesco Frapporti
  • 5,195
  • 4
  • 32
  • 39