<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- 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="carousel-item item active"> <img src="http://placekitten.com/960/600"> </div> <div class="carousel-item item"> <img src="http://placebear.com/960/600"> </div> <div class="carousel-item 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>

.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'); }); });