Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Select an option

  • Save lucapalomba/40800b5f4064fcf2d16567842ae4b937 to your computer and use it in GitHub Desktop.

Select an option

Save lucapalomba/40800b5f4064fcf2d16567842ae4b937 to your computer and use it in GitHub Desktop.
Bootstrap 3 carousel with swipe and Touch Detection
<div class="container">
<div class="alert alert-warning hidden" role="alert">Not a touch Device, touch events and swipe are not initilized
</div>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://unsplash.it/1400/600/?random">
</div>
<div class="item">
<img src="https://unsplash.it/1401/600/?random">
</div>
<div class="item">
<img src="https://unsplash.it/1400/601/?random">
</div>
<div class="item">
<img src="https://unsplash.it/1401/601/?random">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
if (Modernizr.touch) {
$(".carousel").swipe({
swipe: function(
event,
direction,
distance,
duration,
fingerCount,
fingerData
) {
if (direction == "left") $(this).carousel("next");
if (direction == "right") $(this).carousel("prev");
},
allowPageScroll: "vertical"
});
} else {
$(".alert").removeClass("hidden");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.4/jquery.touchSwipe.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
//Forked from https://codepen.io/andrearufo/pen/rVWpyE
.container {
padding-top: 20px;
}
//Are you looking for a Drag and Snap carousel? look here --> https://codepen.io/lucapalomba/pen/gwAxqk
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
@son89
Copy link

son89 commented Sep 15, 2019

hi , i want carousel slider include to master page with js function onclick = showslider() but when include slider to master page i cant use script ,not working for slider , me generate multiple slider in same page

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment