带有 jQuery 滑块的 CSS 水平滚动溢出答案

【问题标题】：CSS horizontal scrolling overflow with jQuery slider带有 jQuery 滑块的 CSS 水平滚动溢出
【发布时间】：2010-05-17 17:07:48
【问题描述】：

我正在尝试设置一个全屏 jquery 滑块。我将项目分为两个步骤 1) css 和 2) js。

1) CSS，下面是我正在拍摄的图片（没有固定高度），下面是我目前无法使用的代码。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <style type="text/css">

        /* Positioning */
        #container { width: 2500px; }
        .block { display: inline; }

        /* Styling */
        .block img { padding: 5px; }

    </style>
</head>
<body>
    <div id="container">
        <div class="block"><img src="http://i42.tinypic.com/1zp2poz.gif"></div>
        <div class="block"><img src="http://i42.tinypic.com/1zp2poz.gif"></div>
        <div class="block"><img src="http://i42.tinypic.com/1zp2poz.gif"></div>
    </div>
</body>
</html>

2) Javascript，使用 jquery 我希望 div 在单击它们时向左滑动...如果可能的话，就像 jQuery Coda Slider。

谢谢，感谢任何帮助。

【问题讨论】：

链接断开，新链接很可能是这样的：kevinbatdorf.github.io/codaslider

标签： jquery css jquery-plugins javascript horizontal-scrolling

【解决方案1】：

您需要首先将容器 div 的 css 设置为固定宽度，并将溢出设置为隐藏，以便仅显示该区域内的内容：

#container{
  width:500px;
  height:200px;
  overflow:hidden;
}

您希望滑块如何工作？自动的？按钮按下？有一些插件可能会自动处理它

【讨论】：

我希望能够点击下一个 div，向左滑动（有点像上图）。同样在容器之外，我需要一个导航链接，该链接将转到 div。
我真的需要它看起来像上面的图形，所以显示下一张幻灯片是至关重要的，所有的幻灯片都会有不同的高度。所以我将overflow-x设置为hidden并在body中设置clip: auto。
是否有人已经准备好修复我也在搜索这个

【解决方案2】：

看那个东西：http://apirocks.com/html5/html5.html （用 Chrome 测试）

【讨论】：

不错。非常接近我的需要。想知道它是否可以设置为只有容器滑动并且页眉和页脚保持不变。
我猜你可以使用几个绝对定位的 div
好吧，搞砸了，我很难让相对页脚保持在绝对滑动容器下方......任何想法。
链接断开。无法关注。