CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrap-3swipe
Morten Hagh
Morten Hagh

Reputation: 2113

Swipe columns with bootstrap

I am trying to find out how to make a swipe-content-thingy using bootstrap.

The concept is shown below

enter image description here

On mobile the green box should be visible in the view and when I slide either left or right, the boxes should be pushed in the direction the user slided ....

I can't seem to find the right approac. I have installed TouchSwipe, but I am kinda stuck.

Here is my current 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>

Upvotes: 2

Views: 5500

Answers (1)

Morten Hagh
Morten Hagh

Reputation: 2113

Problem solved! I installed Swiper plugin http://idangero.us/swiper

Upvotes: 1

Related Questions