1

我正在使用 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.

索引.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>

我还尝试了另一个 Bootstrap 轮播滑动库（https://github.com/avinoamr/bootstrap-carousel-swipe），但遇到了同样的问题。

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

4

2 回答 2

0

这是我一直在使用的一些 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。希望这可以帮助。

于 2016-11-22T13:03:06.327 回答
0 
<!--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"
            } );
于 2021-09-08T15:57:02.577 回答