在两个页面上滑动（使用 touchSwipe）的引导轮播不会滑动答案

【问题标题】：Bootstrap carousel with swipe (using touchSwipe) on two pages does not swipe在两个页面上滑动（使用 touchSwipe）的引导轮播不会滑动
【发布时间】：2016-09-05 23:17:44
【问题描述】：

我正在使用 Bootstrap 和 Ratchet 构建一个移动网络应用程序。我有两个页面，index.html 和 main.html。每个页面都包含一个 Bootstrap 轮播，并使用 touchSwipe 添加了滑动支持。我正在使用Chrome Mobile Emulation 进行测试。两个页面上的轮播是相同的。

当我第一次加载 index.html 页面时，轮播上的滑动功能起作用了。但是，当我切换到 main.html（通过 index.html 中的链接）时，我无法在 main.html 中滑动轮播。当我首先加载 main.html 和 index.html 第二个时，也会发生同样的情况。但是，当我刷新页面（在任一页面上）时，轮播再次工作......

我注意到$(document).ready(init);仅在我第一次加载页面或刷新页面时触发，但在我切换到其他页面时没有触发，我相信这是问题的根源，但是我不确定如何解决这个问题。

我在控制台中看到以下错误消息： 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>

我也尝试将这些脚本标签放在<body> 标签之后，但无济于事。

index.html 和 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>

我也尝试过another Bootstrap carousel swipe library (https://github.com/avinoamr/bootstrap-carousel-swipe)，但遇到了同样的问题。

任何帮助将不胜感激。提前致谢。

【问题讨论】：

标签： jquery twitter-bootstrap carousel ratchet-bootstrap

【解决方案1】：

这是我一直在使用的一些 jQuery：

$(".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");
    });
});

无需 touchSwipe 或任何其他插件。如果您需要调整滑动的灵敏度，请调整 5 和 -5。希望这会有所帮助。

【讨论】：

【解决方案2】：

<!--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"
            } );

【讨论】：

请添加更多详细信息以扩展您的答案，例如工作代码或文档引用。