javascript - jQuery 工具 : Scrollable/Navigator items flowing out of the container

Question

我将 jQuery 工具的 Scrollable 与 Navigator 插件一起使用。

一些有用的链接:

• Documentation for Scrollable
• Documentation for Scrollable's Navigator plugin
• Standalone demo of Navigator

最重要的是:a demo of how I'm using Scrollable/Navigator .

到目前为止效果很好。但我希望它的行为有所不同:

我希望图像(或者更确切地说，一般来说，<div class="items"> 中的元素)从 Scrollable 容器(在我的演示中为 <div class="slider">)“流出”，直到浏览器窗口的右边界。
与屏幕分辨率较低的人相比，屏幕分辨率较高的人显然会看到更多的图片/元素从容器中流出。

如果这听起来令人困惑(它可能确实如此)，这里有一些图片:

• first image, normal
• first image, how it should be

...然后当您单击向右箭头滚动到下一张图片时:

• second image, normal
• second image, how it should be

好的，我想就是这样了。感谢您阅读到这里!

任何帮助将不胜感激!提前致谢!

Answer 1

更新 3 - (在 IE6、IE7、IE8、Chrome、Firefox 中测试)

演示:

http://so.devilmaycode.it/jquery-tools-scrollable-navigator-items-flowing-out-of-the-container/

CSS:

(代表要更改/添加的东西)

*{margin:0;padding:0}
body,html{overflow:hidden}
#wrapper {
    height: 500px;
    width: 100%;
    overflow: hidden
}
.slider {
    margin: 50px auto;
    width: 3000px;
    overflow: hidden
}
.slider .items {
    top: 0;
    left: 0;
    width: 3000px;
    height: 400px;
    position: absolute;
    z-index: 1
}
a.browse{z-index:2}
a.prev{left:10px}
a.next{background-position:0 -30px;left:460px}
#navi{margin:10px 0 0 50px}