How can enable swipe image in slide by touch (or mouse) in bootstrap?

Question

How can enable touch slide in bootstrap?

for example: this

and this is js script:

$(document).ready( function() {
    $('#myCarousel').carousel({
        interval:   4000
    });

    var clickEvent = false;
    $('#myCarousel').on('click', '.nav a', function() {
            clickEvent = true;
            $('.nav li').removeClass('active');
            $(this).parent().addClass('active');        
    }).on('slid.bs.carousel', function(e) {
        if(!clickEvent) {
            var count = $('.nav').children().length -1;
            var current = $('.nav li.active');
            current.removeClass('active').next().addClass('active');
            var id = parseInt(current.data('slide-to'));
            if(count == id) {
                $('.nav li').first().addClass('active');    
            }
        }
        clickEvent = false;
    });
});

how can do it?

Answer 1

Tutorial

You will have to get jQuery Mobile . Once jQuery Mobile has been downloaded (or created; you can just choose to have touch events to be enabled to decrease file size, here ).

Here is some code you can use to swipe the carousel:

$(document).ready(function() {
  $("#myCarousel").swiperight(function() {
    $("#myCarousel").carousel('prev');
  });
  $("#myCarousel").swipeleft(function() {
    $("#myCarousel").carousel('next');
  });
});

Hope it works.