引導滑柱

Question

我試圖找出如何在此網站上滑動樣柱/盒（未轉盤）（第二部分水平）： 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 divs，但那就是我想要達到的效果，在分頁之後呈現第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但玩：關閉或啓動：假的，取其滑塊用途。

小提琴證明他們的代碼從網站上隔離，因此你可以研究它

SLIDER