Swipeview - 显示下一个项目的预览/片段？

Posted 2023-05-07

【中文标题】Swipeview - 显示下一个项目的预览/片段？

【英文标题】：Swipeview - show preview/snippet of next item?

【发布时间】：2012-06-24 14:59: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 以满足我的需要的任何想法？

【问题讨论】：

这样？ dimsemenov.com/plugins/royal-slider/visible-nearby

【参考方案1】：

您只能使用 css 来实现这一点。只需在项目上添加比例效果。

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

查看： http://jsfiddle.net/frapporti/Xt9dM/