滑动视图 - 显示下一项的预览/片段

Swipeview - show preview/snippet of next item?

本文关键字：一项 片段 视图 显示      更新时间：2023-09-26

我正在使用Swipeview（http://cubiq.org/swipeview）创建一个支持触摸的carousel在iPhone和Android上工作。基础知识效果很好。

当我尝试让它显示下一个幻灯片 pr 默认值的 25% 时，我的问题就开始了。这个想法是，用户可以看到下一张幻灯片/图像的 1/4，然后应该让他们滑动图像以显示下一张幻灯片/图像。然后第一个图像消失，第二个图像变得 100% 可见，向左对齐，然后第三个图像可见 1/4。等等。

我尝试将div.style.cssText（以 swipeview.js 为单位）更改为宽度为 75% 而不是默认100%。这适用于初始加载，但是当我滚动时，幻灯片 1 上可见的第二个图像部分现在隐藏在幻灯片 2 上。

我做了一个小提琴来演示：http://jsfiddle.net/zeqjN/1/（在Chrome中进行测试并尝试将图像向左拖动）

关于如何修改swipeview.js以满足我的需求的任何想法？

您只能使用 css 来实现这一点。只需在项目上添加缩放效果即可。

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

退房：http://jsfiddle.net/frapporti/Xt9dM/

相关文章：