Bootstrap carousel with swipe (using touchSwipe) on two pages does not swipe

Question

Bootstrap carousel with swipe (using touchSwipe) on two pages does not swipe

3.5k Views Asked by VIN At 18 April 2025 at 09:28

I am building a mobile web app using Bootstrap and Ratchet. I have two pages, index.html and main.html. Each page contains one Bootstrap carousel with added swipe support using touchSwipe. I'm testing using Chrome Mobile Emulation. The carousels on both pages are identical.

When I first load the index.html page, the swiping functionality on the carousel works. However, when I switch to main.html (via a link in index.html), I am unable to swipe the carousel in main.html. The same occurs when I load main.html first, and index.html second. However, when I refresh the page (on either page), the carousel works again...

I noticed that $(document).ready(init); is only triggered when I load the page for the first time, or refresh the page, but not fired when I switch to the other page, and I believe that is the source of the problem, but I'm not sure how to go about fixing this.

I am seeing these error messages in the console: Ignored attempt to cancel a touchend event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.

Deferred long-running timer task(s) to improve scrolling smoothness. See crbug.com/574343.

index.html

<head>...
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script
<script src="js/bootstrap.min.js"></script>
<script src="js/ratchet.min.js"></script>
<script src="js/jquery.touchSwipe.min.js"></script>
<script>
  var init = function(){
    $('.dropdown-toggle').dropdown();
    $(".carousel-inner").swipe( {
      swipeLeft:function(event, direction, distance, duration, fingerCount) {
        $(this).parent().carousel('next');
      },
      swipeRight: function() {
        $(this).parent().carousel('prev');
      },
      threshold:0
    });
  }
  $(document).ready(init);
</script>
</head>

I have also tried to place these script tags after the <body> tags to no avail.

Carousel code in index.html and main.html

<!-- 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>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
  <div class="item active">
    <img src="placeholderimg1.jpg" alt="...">
    <div class="carousel-caption">...</div>
  </div>
    <div class="item">
      <img src="placeholderimg2.jpg" alt="...">
      <div class="carousel-caption">...</div>
    </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>

I've also tried another Bootstrap carousel swipe library (https://github.com/avinoamr/bootstrap-carousel-swipe) but experienced the same problem.

Any help would be appreciated. Thanks in advance.

Original Q&A

There are 2 best solutions below

**Fahri Meral** · Answer 1

<!--for bootstrap 5 not working solition-->    
<a id="left" class="left carousel-control" href="#bootstrap-touch-slider" role="button" data-slide="prev">Previous</a>
<a id="right" class="right carousel-control" href="#bootstrap-touch-slider" role="button" data-slide="next">Next</a>
    
 

//swipe initial - in .js file
            $( ".carousel .carousel-inner" ).swipe( {
                swipeLeft: function ( event, direction, distance, duration, fingerCount ) {
                    this.parent( ).carousel( 'next' );
                    $('#left').click(); //smartek.fixed.08.09.21 for bootstrap 5
                },
                swipeRight: function ( ) {
                    this.parent( ).carousel( 'prev' );
                    $('#right').click(); //smartek.fixed.08.09.21 for bootstrap 5
                },
                threshold: 0,
                excludedElements: "label, button, input, select, textarea, .noSwipe"
            } );

**Liam** · Answer 2

Here's a bit of jQuery I've been using:

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

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

Bootstrap carousel with swipe (using touchSwipe) on two pages does not swipe

There are 2 best solutions below

Related Questions in JQUERY

Related Questions in TWITTER-BOOTSTRAP

Related Questions in CAROUSEL

Related Questions in RATCHET-BOOTSTRAP

Trending Questions

Popular # Hahtags

Popular Questions