javascript - 入力フォーカスで Bootstrap カルーセルを一時停止する方法

Question

シンプルなフォームを含む Bootstrap カルーセルがあります。カルーセルにカーソルを合わせたときに一時停止するように設定できます。ただし、入力内で入力中にカーソルがカルーセル領域を離れると、カルーセルはデフォルトのサイクルと 5000 ミリ秒の間隔に戻ります。

入力フォーカス中に一時停止し、入力フォーカスアウト時にサイクルを再開するように設定しようとしています。

<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
    <div id="slide1" class="item">
        This is a test slide.
    </div>
    <div id="slide2" class="item" >
        <input type="text" placeholder="name" name="full_name" />
    </div>
</div>

<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹&lt;/a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›&lt;/a>

</div>

<script>

!function ($) {
    $(function(){
        $('#myCarousel.slide').carousel({
            interval: 5000,
            pause: "hover"
        })
    })
}(window.jQuery)

$('input').focus(function(){
    $("#myCarousel").pause()
}) /* Will worry about restarting carousel on mouseout if I could get this pause working */


</script>

カルーセルが最初に呼び出されると（および間隔が設定されると）、その間隔またはカルーセルの動作を変更できないようです。

どんな洞察も素晴らしいでしょう。

Answer 1

次のように一時停止関数を呼び出す必要があります$("#myCarousel").carousel('pause');。これは、jQuery UI 規則に従って、ブートストラップ コンポーネントですべてのメソッドが呼び出される方法です。

blurイベントをリッスンしてからメソッドを呼び出すことで、カルーセルを再開できますcycle。$(function() {...});イベント ハンドラーをラッパー内に移動する必要もあります。これにより、すべての DOM 要素が存在し、操作できるようになります。

したがって、一時停止/循環コードは次のようになります。

$(function(){
    $('#myCarousel.slide').carousel({
        interval: 5000,
        pause: "hover"
    });

    $('input').focus(function(){
       $("#myCarousel").carousel('pause');
    }).blur(function() {
       $("#myCarousel").carousel('cycle');
    });
});

ワーキングデモ

Answer 2

これは、カルーセルを一時停止する方法です

$("#myCarousel").carousel('pause');