Swipe-Spalten mit Bootstrap

Question

Ich versuche herauszufinden, wie man ein Swipe-Content-Ding mit Bootstrap machen.

Das Konzept wird unter

Auf mobilen grünen Kasten gezeigt sollte in der Ansicht sichtbar sein, und wenn ich nach links oder rechts schieben, sollten die Boxen der Benutzer verschoben in Richtung geschoben werden. ...

Ich kann nicht scheinen, den richtigen approac zu finden. Ich habe TouchSwipe installiert, aber ich bin irgendwie festgefahren.

Hier ist meine aktuelle 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> 

Answer 1

Problem gelöst! Ich habe das Swiper-Plugin http://idangero.us/swiper

installiert