2016-04-26 91 views
2

我想了解如何使用引導來製作一個滑動內容thingy。用引導程序滑動列

概念如下所示

enter image description here

在移動綠色框應該在視圖中可見,當我滑動左或右時,盒應在用戶滑動的方向被推動。 ...

我似乎無法找到合適的平易近人。我已經安裝了TouchSwipe,但我有點卡住了。

這是我目前的HTML

<div id="neighbourHoodSchools" class="stat-content-block"> 
    <div class="row eq-height text-center swipe-container"> 
    <div class="swipe-button-left"><i class="fa fa-bars"></i></div> 
    <div class="swipe-button-right"><i class="fa fa-bars"></i></div> 
    <div class="col-md-4 swipe-in"> 
     <div class="swipe-content swipe-left left-out"> 
     <div class="section-inner"> 
      <h3>Nærmeste<br />børnehave</h3> 
      <span id="kinderGardenName" class="dynamic-input-line name">Børnehaven Thorsens Allé</span> 
      <span id="kinderGardenDistance" class="dynamic-input-line large section-color">300 m</span> 
      <span id="kinderGardenIcon" class="report-data-icon"><i class="icon-boernehave"></i></span> 
      <span id="kinderGardenRoute" class="report-data-route text-uppercase"><a href="#">Se rute</a></span> 
     </div> 
     </div> 
    </div> 
    <div class="col-md-4 background-light"> 
     <div class="section-inner"> 
     <h3>Nærmeste<br />skole</h3> 
     <span id="schoolName" class="dynamic-input-line name">Gl. Hasseris Skole</span> 
     <span id="schoolDistance" class="dynamic-input-line large section-color">670 m</span> 
     <span id="schoolIcon" class="report-data-icon"><i class="icon-skole"></i></span> 
     <span id="schoolRoute" class="report-data-route text-uppercase"><a href="#">Se rute</a></span> 
     </div> 
    </div> 
    <div class="col-md-4 swipe-in right-out"> 
     <div class="swipe-content swipe-in-right"> 
     <div class="section-inner"> 
      <h3>Nærmeste<br />gymnasium</h3> 
      <span id="gymnasiumName" class="dynamic-input-line name">Hasseris Gymnasium</span> 
      <span id="gymnasiumDistance" class="dynamic-input-line large section-color">1,8 km</span> 
      <span id="gymnasiumIcon" class="report-data-icon"><i class="icon-gymnasium"></i></span> 
      <span id="gymnasiumRoute" class="report-data-route text-uppercase"><a href="#">Se rute</a></span> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

回答