2016-04-26 62 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> 

回答