title: Swipe left/right for MOBILE on Bootstrap 3 Carousel
body: <p>I tried to add swipe left/right to a Bootstrap Carousel Slider with jquery, but it doesn't work. Here's my code :</p>
  
  <pre><code>&lt;div class="container"&gt;
  
    &lt;div id="carousel-example-generic" class="carousel slide" data-ride="carousel"&gt;
      &lt;!-- Indicators --&gt;
      &lt;ol class="carousel-indicators"&gt;
        &lt;li data-target="#carousel-example-generic" data-slide-to="0" class="active"&gt;&lt;/li&gt;
        &lt;li data-target="#carousel-example-generic" data-slide-to="1"&gt;&lt;/li&gt;
        &lt;li data-target="#carousel-example-generic" data-slide-to="2"&gt;&lt;/li&gt;
        &lt;li data-target="#carousel-example-generic" data-slide-to="3"&gt;&lt;/li&gt;
        &lt;li data-target="#carousel-example-generic" data-slide-to="4"&gt;&lt;/li&gt;
      &lt;/ol&gt;
  
      &lt;!-- Wrapper for slides --&gt;
      &lt;div class="carousel-inner" role="listbox"&gt;
        &lt;div class="item active"&gt;
          &lt;img src=""&gt;
        &lt;/div&gt;
        &lt;div class="item"&gt;
          &lt;img src=""&gt;
        &lt;/div&gt;
        &lt;div class="item"&gt;
          &lt;img src=""&gt;
        &lt;/div&gt;
        &lt;div class="item"&gt;
          &lt;img src=""&gt;
        &lt;/div&gt;
        &lt;div class="item"&gt;
          &lt;img src=""&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;!-- Controls --&gt;
      &lt;a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"&gt;
        &lt;span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;
        &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
      &lt;/a&gt;
      &lt;a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"&gt;
        &lt;span class="glyphicon glyphicon-chevron-right" aria-hidden="true"&gt;&lt;/span&gt;
        &lt;span class="sr-only"&gt;Next&lt;/span&gt;
      &lt;/a&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;  
  </code></pre>
  
  <p>Javascript :</p>
  
  <pre><code>$(".carousel").swipe({
  
    swipe: function(event, direction, distance, duration, fingerCount, fingerData) {
  
      if (direction == 'left') $(this).carousel('next');
      if (direction == 'right') $(this).carousel('prev');
  
    },
    allowPageScroll:"vertical"
  
  });
  </code></pre>
  
  <p>I want to add that I also tried using jquery mobile script from the official page : </p>
  
  <pre><code>&lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /&gt;
  &lt;script src="http://code.jquery.com/jquery-1.11.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"&gt;&lt;/script&gt; 
  </code></pre>
  
  <p>It doesn't work to swipe the images anyway I have tried.
  Scripts that I use on my page:</p>
  
  <pre><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  </code></pre>