Carousel（'pause'）在移动设备上不起作用

Question

基本上，如果我尝试以编程方式暂停轮播，那么它将无法在移动浏览器上正常运行，

类似：

$('.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或刀片：

<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>