Swipeview - show preview/snippet of next item?
Asked Answered
P

1

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?

Picaresque answered 22/6, 2012 at 9:57 Comment(1)
like this? dimsemenov.com/plugins/royal-slider/visible-nearbyEdacity
W
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/

Washin answered 21/5, 2014 at 21:14 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.