<!-- http://lazcreative.com/blog/adding-swipe-support-to-bootstrap-carousel-3-0/ -->
<script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script>
<div class="content-area">
<div id="myCarousel" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://placekitten.com/960/600">
</div>
<div class="item">
<img src="http://placebear.com/960/600">
</div>
<div class="item">
<img src="http://lorempixel.com/960/600">
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
</div>
.content-area {
position: relative;
width: 960px;
margin: 0 auto;
}
.carousel-indicators li {
border-radius: 50%;
height: 20px;
width: 20px;
}
.carousel-indicators .active {
height: 25px;
width: 25px;
}
$(document).ready(function() {
$(".carousel-inner").swiperight(function() {
$(this).parent().carousel('prev');
});
$(".carousel-inner").swipeleft(function() {
$(this).parent().carousel('next');
});
});
