Bootstrap default carousel with swipe and touch gestures. How to add the swipes gesture to the Bootstrap carousel on mobile devices.
After fork:
A Pen by Luca Palomba on CodePen.
| <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" /> |
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