Question

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

假设我有5列。我想最初渲染3个：1 2 3 并有一个分页选项，点击我们将隐藏第一列并显示第4列：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>

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

Answer 1

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

Answer 2

最好的方法是使用列表作为您采样的原始网站。如果你打算使用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，无论滑块使用哪个。

小提琴演示他们的代码与网站隔离，以便您可以研究它

SLIDER

Bootstrap滑动柱

2 个答案: