缩略图分页/滚动答案

【问题标题】：thumbnail pagination/scrolling缩略图分页/滚动
【发布时间】：2012-10-01 19:55:36
【问题描述】：

我正在使用插件来充当图像/图库滑块。就目前而言，主图像下方的缩略图以网格形式显示 - 我希望它们显示在单行中，来回滑动以显示所有图像。我怎样才能做到这一点？

live site.

【问题讨论】：

从live page的源代码中挑出插件做了什么，你自己的css做了什么并不容易。如果您发布生成图库的代码，那可能是一个更好的起点。
@MikeBrant 我尝试限制高度和宽度，并使用overflow-x:scroll;，但这启用了上下滚动，我正在寻找左右滚动。

标签： jquery html css jquery-plugins plugins

【解决方案1】：

为您的容器 div (nivo-controlNav) 设置一个高度。它应该等于你拇指的高度，并将它的溢出设置为隐藏

像这样：

.nivo-controlNav {
    height: 130px; /*here you put your real size*/
    overflow: hidden;
}

后期编辑：

.nivo-controlNav {
    height: 136px;
    width: 960px;
    overflow-y: hidden;
    overflow-x: auto;
}
.nivo-controlNav a {
    width: 136px;
    height: 136px;
    display: inline-block;
    float: left;
}

【讨论】：

谢谢你。进行更改将我的查看面板限制在正确的高度，但未启用滚动。我怎样才能做到这一点？
overflow-x: scroll; 会给你一个滚动条。不是很优雅，但它会起作用。
@JcFx 这样做让我向上/向下滚动。关于如何实现右/左的任何想法？
@AMC 呵呵。那是因为我的错误。已编辑。
overflow: hidden; overflow-x: scroll; 应该给你一个水平滚动。让我测试一下……

【解决方案2】：

我假设它需要浮动图像容器元素。如果它们已经浮动（可能是由于您提到的网格布局），则可能是扩展容器 div 的宽度（包含所有缩略图的 div）。

【讨论】：