Próbowałem więc ogarnąć ten problem i zadałem wczoraj pytanie: Carousel('pause') nie działa na urządzeniach mobilnych< /a>

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

1
Santiago Cuartas Arango 19 grudzień 2019, 07:49
Dla przypomnienia, należy zauważyć, że ten problem został zgłoszony w serwisie GitHub i wydaje się, że działa dla innych osób (na Chrome mobile v79 na iOS). Testowałem się na Firefoksie v68.3 na Androida i też działa. Zalecam utworzenie prostego reprex na CodePen lub fragmentu SO, aby wykluczyć, że problem leży gdzie indziej.
 – 
David
17 styczeń 2020, 20:26

3 odpowiedzi

Spróbuj tego, aby złapać problem:

Umieść console.log lub alert(), aby sprawdzić, czy zdarzenie jest wyzwalane, czy nie.

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

Przypadek 1:

Jeśli „Kliknięcie przyciskunie jest wydrukowane w konsoli, możesz spróbować:

$('body').on('click','.pause-carousel-2',function(){ ...

Przypadek 2:

Jeśli wydrukowane jest „Kliknięcie przycisku”, istnieje obejście tego problemu, które możesz wypróbować.

Użyj wyzwalacza

    $('.pause-carousel-2').on('click', function () {
        $('.pause-carousel').trigger("click");
    });

I ukryj przycisk Wstrzymaj, który znajduje się na zewnątrz

Udostępnij swój wynik, a spróbujemy rozwiązać Twój problem.

1
Zeeshan Eqbal 17 styczeń 2020, 19:55

Ustaw pauzę na fałsz, a to rozwiąże problem

$('.carousel').carousel({
    pause: "false"
});

Możesz zobaczyć przykład tutaj: https://jsfiddle.net/KyleMit/XFcSv/

0
esoteric 17 styczeń 2020, 20:24
Potwierdzono, że usunięcie pause: "false" powoduje, że funkcja pauzy przestaje działać w Firefoksie na urządzeniach mobilnych, ale nie na komputerach. Może możesz zgłosić się z powrotem w GH, łącząc się z tym pytaniem.
 – 
David
17 styczeń 2020, 20:34

Jeśli użyjesz .carousel() jako zmiennej, zadziała. var slider = $('#element').carousel(); I możesz używać we wszystkich wydarzeniach. slider.carousel('pause');, aby zacząć od nowa: slider.carousel({'pause': false});

W przypadku korzystania ze zdarzeń kliknięcia wielu elementów:

$('#btn1, #btn2').click(function(){
slider.carousel('pause');
});

W innym wydarzeniu (najedź):

$('#yourSlider').hover(function(){
  slider.carousel('pause');
  }, function(){
  slider.carousel({'pause': false});
});

Jeśli nie przypiszesz go do zmiennej, karuzela będzie uruchamiana ponownie w ramach każdego zdarzenia.

Dodałem przykład (działa):

$(function(){
var slider = $('#carouselExampleSlidesOnly').carousel({
  interval: 1000
});
$('#pause').click(function(){
slider.carousel('pause');
});

$('#start').click(function(){
slider.carousel({'pause': false});
});

});
.carousel-item{
padding-top: 45px;
text-align: center;
height:150px;
width:100%;
color:#fff;
background-color: #666;
font-size: 2rem;
font-weight: 700;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container p-4">
<button id="pause" class="btn btn-sm btn-warning">Pause</button>
<button id="start" class="ml-2 btn btn-sm btn-primary">Start</button>
</div>

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel" style="width: 90%; marign:auto">
  <div class="carousel-inner">
    <div class="carousel-item active">
      Slide 1
    </div>
    <div class="carousel-item">
      Slide 2
    </div>
    <div class="carousel-item">
      Slide 3
    </div>
  </div>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
0
ariferol01 24 styczeń 2020, 17:05