Dlaczego funkcja Bootstrap 4 Carousel Pausel Pause nie działa, gdy wywoływana jest z powodu elementu wewnątrz karuzeli?

Znalazłem symptom, więc zadaję nowe pytanie z nowym celem.

Tytuł pytania nie mówi wszystkiego, bo byłoby za duże: Dzieje się tak tylko na telefonach z przeglądarkami mobilnymi, Na komputerze jest w porządku .

Zasadniczo, jeśli masz karuzelę Bootstrap 4 i masz jakikolwiek element znajdujący się wewnątrz elementu div z identyfikatorem karuzeli i chcesz dołączyć zdarzenie do tego elementu (np. Kliknięcie), aby wstrzymać karuzelę, to nie zadziała W OGÓLE suwak jedzie dalej.

Próbowałem klikać, przesuwać mysz, przesuwać mysz, próbowałem ustawić zdarzenie kliknięcia selektora na body, próbowałem wywołać zdarzenie kliknięcia na selektorze na zewnątrz, aby je wstrzymać, użyłem rodziców itp.

Utworzono przycisk znajdujący się tuż poza karuzelą, dołączyłem do niego zdarzenie kliknięcia i działa. Używam najnowszej BS (4.4.1)

To jest mój kod:

Plik ostrza:

<div id='slider'>
    <button class='pause-carousel' role='button'>Pause from outside</button>
    <div id='sme-directory-gallery' class='carousel slide' data-ride='carousel'>
        <button class='pause-carousel-2' role='button'>Pause from inside</button>
        <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) }}' 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>

JavaScript:

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

    $('.pause-carousel').on('click', function () {
        $('#sme-directory-gallery').carousel('pause'); // it works
    });

    $('.pause-carousel-2').on('click', function () {
        $('#sme-directory-gallery').carousel('pause'); // it wont work
    });

    $('#sme-directory-gallery .video-mask').mouseup(function () {
        var iframe = $(this).closest('.item').find('iframe');
        var iframe_source = iframe.attr('src');
        if (iframe_source.includes('?rel=0')) {
            iframe_source = iframe_source.replace('?rel=0', '');
        }
        iframe_source = iframe_source + '?autoplay=1';
        iframe.attr('src', iframe_source);
        $(this).toggle();
        $('#sme-directory-gallery').carousel('pause');
    });

    $('#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.includes('?autoplay')) {
                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);
    });
});

Co dokładnie się tutaj dzieje, jak to naprawić?

Z góry dziękuję.