使用 bootstrap 滑动列
Swipe columns with bootstrap
我正在尝试了解如何使用 bootstrap 制作滑动内容。
概念如下
在移动设备上,绿色框应该在视图中可见,当我向左或向右滑动时,框应该被推向用户滑动的方向....
我似乎找不到合适的方法。我已经安装了 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>
问题解决了!我安装了 Swiper 插件 http://idangero.us/swiper
我正在尝试了解如何使用 bootstrap 制作滑动内容。
概念如下
在移动设备上,绿色框应该在视图中可见,当我向左或向右滑动时,框应该被推向用户滑动的方向....
我似乎找不到合适的方法。我已经安装了 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>
问题解决了!我安装了 Swiper 插件 http://idangero.us/swiper