Javascript 转盘(';暂停';)不是';t在移动设备上工作

Javascript 转盘(';暂停';)不是';t在移动设备上工作,javascript,jquery,twitter-bootstrap,bootstrap-4,Javascript,Jquery,Twitter Bootstrap,Bootstrap 4,基本上,如果我尝试按编程方式暂停旋转木马,它在移动浏览器上不起作用,在桌面上也可以 比如: $('.carousel').carousel('pause'); 不会对旋转木马本身产生任何影响,它会在图像中不断循环 还尝试: $('.carousel').carousel({ interval: false }); 然后再加上停顿,没有任何效果 这有什么特别的问题吗?或者有什么方法可以解决 提前谢谢 编辑:这是全部代码: $(document).ready(function () {

基本上,如果我尝试按编程方式暂停旋转木马,它在移动浏览器上不起作用,在桌面上也可以

比如:

$('.carousel').carousel('pause');
不会对旋转木马本身产生任何影响,它会在图像中不断循环

还尝试:

$('.carousel').carousel({
    interval: false
});
然后再加上停顿,没有任何效果

这有什么特别的问题吗?或者有什么方法可以解决

提前谢谢

编辑:这是全部代码:

$(document).ready(function () {
    $('.carousel-indicators').scrollLeft(0);
    $('#sme-directory-gallery').carousel('cycle');

    $('.video-mask').click(function () {
        var iframe = $(this).closest('.item').find('iframe');
        var iframe_source = iframe.attr('src');
        iframe_source = iframe_source + "?autoplay=1"
        iframe.attr('src', iframe_source);
        $(this).toggle();
        $('#sme-directory-gallery').carousel();
    });

    $('#sme-directory-gallery').on('slide.bs.carousel', function (e) {
        $('#sme-directory-gallery').carousel('cycle');

        var iframeID = $(this).find('iframe').attr('id');
        if (iframeID != undefined) {
            callPlayer(iframeID, 'stopVideo');
        }

        $('.video-mask').show();
        $('#sme-directory-gallery').find('iframe').each(function (key, value) {
            var url = $(this).attr('src');
            if (url.indexOf('autoplay') > 0) {
                var new_url = url.substring(0, url.indexOf('?'));
                $(this).attr('src', new_url);
            }
        });

        setTimeout(() => {
            var scrollTo = $('.list-inline-item.active').position().left;
            if ($('.list-inline-item.active').index() > 0) {
                scrollTo = $('.list-inline-item.active').prev('.list-inline-item').position().left;
            }
            var finalOrFirst = 0;
            if (e.direction === 'right') {
                if ($('.list-inline-item.active').is(':last-child')) {
                    finalOrFirst = 99999;
                }
            } else {
                if ($('.list-inline-item.active').is(':first-child')) {
                    finalOrFirst = -99999;
                }
            }

            var currentScroll = $('.carousel-indicators').scrollLeft();
            var scrollResult = currentScroll + scrollTo + finalOrFirst;
            $('.carousel-indicators').animate({scrollLeft: scrollResult}, 500);
        }, 10);
    });
});
编辑2:这是html,更确切地说是blade:

<div class='card-body text-center sme-directory-card-body sme-directory-gallery'>
    <div id='slider'>
        <div id='sme-directory-gallery' class='carousel slide'>
            <div class='carousel-inner'>
                @foreach($directoryInfo->videos as $index => $video)
                    <div class='item carousel-item {{ $index === 0 ? 'active' : '' }}' data-slide-number='{{ $index }}'>
                        <div class='video-mask'></div>
                        <div class='d-flex justify-content-center'>
                            <div class='embed-responsive embed-responsive-21by9'>
                                <iframe class='embed-responsive-item player' src='{{ 'https://www.youtube.com/embed/' . substr($video->url, strrpos($video->url, 'v=') + 2) . '?rel=0' }}' allowfullscreen></iframe>
                            </div>
                        </div>
                    </div>
                @endforeach

                @foreach($directoryInfo->images as $index => $image)
                    <div class='item carousel-item {{ ($index + sizeof($directoryInfo->videos)) === 0 ? 'active' : '' }}' data-slide-number='{{ $index + sizeof($directoryInfo->videos) }}'>
                        <div class='d-flex justify-content-center'>
                            <img src='{{ asset('storage/' . $image->path) }}' class='img-fluid' alt='imagen'>
                        </div>
                    </div>
                @endforeach

                <a class='carousel-control-prev' href='#sme-directory-gallery' role='button' data-slide='prev'>
                    <div class='rounded-circle'>
                        <span class='carousel-control-prev-icon' aria-hidden='true'></span>
                        <span class='sr-only'>Previous</span>
                    </div>
                </a>
                <a class='carousel-control-next' href='#sme-directory-gallery' role='button' data-slide='next'>
                    <div class='rounded-circle'>
                        <span class='carousel-control-next-icon' aria-hidden='true'></span>
                        <span class='sr-only'>Next</span>
                    </div>
                </a>
            </div>

            <ul class='carousel-indicators list-inline'>
                @foreach($directoryInfo->videos as $index => $video)
                    <li class='list-inline-item my-2 {{ $index === 0 ? 'active' : '' }}'>
                        <a id='carousel-selector-{{ $index + sizeof($directoryInfo->videos) }}' class='sme-gallery-anchor' data-slide-to='{{ $index }}' data-target='#sme-directory-gallery'>
                            <img src='{{ 'https://img.youtube.com/vi/' . substr($video->url, strrpos($video->url, 'v=') + 2) . '/mqdefault.jpg' }}' class='img-fluid'>
                            <div class='text-white sme-gallery-middle-icon'>
                                <span class='fas fa-play'></span>
                            </div>
                        </a>
                    </li>
                @endforeach

                @foreach($directoryInfo->images as $index => $image)
                    <li class='list-inline-item {{ $index + sizeof($directoryInfo->videos) === 0 ? 'active' : '' }}'>
                        <a id='carousel-selector-{{ $index + sizeof($directoryInfo->videos) }}' data-slide-to='{{ $index + sizeof($directoryInfo->videos) }}' data-target='#sme-directory-gallery'>
                            <img src='{{ asset('storage/' . $image->path) }}' class='img-fluid'>
                        </a>
                    </li>
                @endforeach
            </ul>
        </div>
    </div>
</div>

@foreach($directoryInfo->videos as$index=>$video)
@endforeach
@foreach($directoryInfo->imagesas$index=>$image)
路径)}}'class='img-fluid'alt='imagen'>
@endforeach


我刚刚快速创建了一个示例站点,我似乎无法重现这个问题。。。你在用什么电话?可能是浏览器的问题。。下面的演示应该在第二张幻灯片上暂停,它对您有用吗。。。顺便说一句,我在Pixel 3上进行了测试,效果很好…@MattOestreich我发布了我的全部代码,我看到的唯一区别是我用“cycle”初始化了旋转木马,因为如果我不这样做,它就不会在页面加载时循环。有一点背景知识,我点击一张包含视频的幻灯片,第一次点击/轻触会暂停并将视频加载到iFrame上。您不必调用
循环
,它就会自动开始循环。。您还必须发布您的HTML,因为仅凭这些代码很难确定。@MattOestreich done,这是blade,所以一些内容来自数据库