自举滑动柱答案

【问题标题】：Bootstrap sliding columns自举滑动柱
【发布时间】：2014-04-16 14:45:52
【问题描述】：

我正在尝试弄清楚如何在本网站（水平第二部分）中创建滑动列/框（不是轮播）： https://www.resumerepublic.com/

假设我有 5 列。我最初想渲染其中的 3 个：1 2 3 并有一个分页选项，点击它我们将隐藏第一列并显示第四列：2 3 4 等等。我不想使用轮播和显示项目组。我想在分页期间显示单个项目。

<div class="row">
    <div class="span4">
        <div class="thumbnail">
          <img alt="300x200"  style="height: 200px;width: 100%" src="images/1.png">
        </div>
   </div>
    <div class="span4">
        <div class="thumbnail">
          <img alt="300x200" style="height: 200px;width: 100%" src="images/2.png">
        </div>
    </div>
    <div class="span4">
        <div class="thumbnail">
          <img alt="300x200" style="height: 200px;width: 100%" src="images/3.png">
        </div>
    </div>
    <div class="span4">
        <div class="thumbnail">
          <img alt="300x200" style="height: 200px;width: 100%" src="images/4.png">
        </div>
    </div>
    <div class="span4">
        <div class="thumbnail">
          <img alt="300x200" style="height: 200px;width: 100%" src="images/5.png">
        </div>
    </div>
</div>

这是使用引导程序 2.4.2。我知道我只能有 3 个 span4 div，但这就是我想要实现的，在分页后渲染第 4 和第 5 个缩略图。

【问题讨论】：

标签： jquery html css twitter-bootstrap slider

【解决方案1】：

最好的方法是使用列表作为您抽样使用的原始网站。如果你打算使用 div，给它们 id 并用 AJAX 引用它们。在 css 中，使用您的过渡属性使它们滑入/滑出。

.transitions{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 420px;
    transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -webkit-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
}

或按照我的建议使用列表并使用轮播 jquery，但无论滑块使用哪个播放：off 或 start:false。

Fiddle 演示了与网站隔离的代码，以便您可以研究它

SLIDER

【讨论】：

感谢@LOTUSMS，我查看了 jsfiddle 示例。当我单击下一个和上一个图标时，没有任何反应。（对不起，如果这是一个菜鸟评论）。你提供的过渡和 jsfiddle 中的过渡，不是为了悬停效果吗？因为我没有看到那里正在处理 onclick 事件。仍在尝试弄清楚点击是如何处理的。

【解决方案2】：

我之前忘记更新这个问题了。我能够使用 jCarousel 插件解决问题：http://sorgalla.com/jcarousel/ 但是，我不能使用引导类来创建网格布局。按照 LOTUSMS 的建议，将实现更改为使用列表。

【讨论】：