具有预览功能的不寻常的响应分割滑块

时间:2012-08-29 16:53:13

标签: javascript css layout slider responsive-design

我看过很多不同的滑块,但没有找到任何可以完成设计师想要的东西。下面的图片应该有助于解释。请注意,页眉/页脚内容的滑块上方和下方都有空格。

一个。基本上这个想法是使用一定数量的屏幕空间(例如10%)在右侧部分可见下一个图像(2)。

B中。当前图像(1)浮动到左侧并填充高度 - 它可能是宽或窄的图像。

℃。浅灰色显示的空间量取决于用户可用的屏幕空间。当图像达到完全分辨率时,间隙将根据需要扩展。

d。相反,随着可用空间缩小,间隙将缩小,并且

电子。在间隙达到最小尺寸后,滑块会缩小。

F。然后,当前的幻灯片(1)将从左侧开始剪辑。如果需要的话(广角图像)。

-G。对于动画,下一张幻灯片(2),滑过以填补间隙,然后将当前幻灯片(1)碰到,留下间隙,然后将下一张图像部分拉入。

是否有滑块已经做了类似的事情,或者我是否需要修改现有滑块?如果是这样,那将是一个很好的起点?我尝试过像Flexslider这样的程序,但JS调整大小会干扰屏幕上的两个。

还没有图片发布权限,所以这里是:http://imgur.com/swYtr

1 个答案:

答案 0 :(得分:1)

试试这个....

Cool carousel

查看网站上提供的更多示例....它可能有助于您的查询。
这是另一个 http://jsfiddle.net/JCQ6Q/15/
祝一切顺利。
投票,如果它可以帮助你。 :)