How to make Bootstrap carousel slider use mobile left/right swipe

Question

DEMO JSSFIDDLE

  <div class="col-md-4">           <!--Carousel-->           <div id="sidebar-carousel-1" class="carousel slide" data-ride="carousel">             <ol class="carousel-indicators grey">               <li data-target="#sidebar-carousel-1" data-slide-to="0" class="active"></li>               <li data-target="#sidebar-carousel-1" data-slide-to="1"></li>               <li data-target="#sidebar-carousel-1" data-slide-to="2"></li>             </ol>             <div class="carousel-inner">               <div class="item active">                 <a href="" data-lightbox="image-1" title="">                 <img src="http://shrani.si/f/3D/13b/1rt3lPab/2/img1.jpg" alt="...">                 </a>               </div>               <div class="item">                 <a href="" data-lightbox="image-1" title="">                 <img src="http://shrani.si/f/S/jE/UcTuhZ6/1/img2.jpg" alt="...">                 </a>                  </div>               <div class="item">                 <a href="" data-lightbox="image-1" title="">                 <img src="http://shrani.si/f/h/To/1yjUEZbP/img3.jpg" alt="...">                 </a>                  </div>             </div>              <!-- Controls -->         <a class="left carousel-control" href="#sidebar-carousel-1" data-slide="prev">           <span class="glyphicon glyphicon-chevron-left"></span>         </a>         <a class="right carousel-control" href="#sidebar-carousel-1" data-slide="next">           <span class="glyphicon glyphicon-chevron-right"></span>         </a>                   </div><!--/Carousel--></div> 

What I want to do is to add left/right touch swipe functionality for mobile devices only. How can I do that?

Also, how do I make prev/next buttons, that appear on hover, smaller for mobile/ipad versions?

Thanks

Answer 1

I'm a bit late to the party, but here's a bit of jQuery I've been using:

$('.carousel').on('touchstart', function(event){     const xClick = event.originalEvent.touches[0].pageX;     $(this).one('touchmove', function(event){         const xMove = event.originalEvent.touches[0].pageX;         const sensitivityInPx = 5;          if( Math.floor(xClick - xMove) > sensitivityInPx ){             $(this).carousel('next');         }         else if( Math.floor(xClick - xMove) < -sensitivityInPx ){             $(this).carousel('prev');         }     });     $(this).on('touchend', function(){         $(this).off('touchmove');     }); }); 

No need for jQuery mobile or any other plugins. If you need to adjust the sensitivity of the swipe adjust the 5 and -5. Hope this helps someone.