使用触摸板时,Bootstrap轮播不会暂停

时间:2018-03-17 12:45:50

标签: jquery twitter-bootstrap bootstrap-4 carousel bootstrap-carousel

我正在使用bootstrap carousel:

$(document).ready( function() {  
    $('.carousel').carousel('pause');

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

我从头开始暂停它,这样我就可以在点击按钮时使用滑动功能:

<div id="myCarousel" class="carousel slide" data-ride="carousel">

    <ul class="nav nav-pills nav-justified">
        <li data-target="#myCarousel" data-slide-to="0" class="carousel-tab active"><a href="#">ListOne</a></li>
        <li data-target="#myCarousel" data-slide-to="1" class="carousel-tab"><a href="#">ListTwo</a></li>
    </ul>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">

        <div class="carousel-item active">
            <div class="carousel-content">

                <div id="listOne" class="list-group"></div>

            </div>
        </div><!-- End Item -->

        <div class="carousel-item">
            <div class="carousel-content">

                <div id="listTwo" class="list-group"></div>

            </div> 
        </div><!-- End Item -->

      </div><!-- End Carousel Inner -->

    </div><!-- End Carousel -->

这很好用。但疯狂的是,当我在笔记本电脑上使用我的页面时,屏幕上有触摸功能并用手指按下按钮而不是用鼠标按下按钮,旋转木马不会暂停&#39;了。有谁知道为什么会这样?这对我来说非常困惑。

0 个答案:

没有答案