bootstrap4カルーセル - 私は<strong>bootstrap4カルーセル</strong>との2つのステップを持ってしようとしています「slide.bs.carousel」イベント

Question

でスライドを停止します。

• まずカルーセル項目は認証（そのユーザー名とパスワードフィールドにあります）
• 2つ目は、承認（用では、ユーザーがアクセス権を持つグループを一覧表示し、選択するために彼に尋ねる1）

私は、ユーザIDとパスワードが有効であるかどうかを確認したいと考えています。の前に、がjavascriptコードで次のスライドに移動します。私は.carousel('pause')を持っていますが、私は次のスライドに移動することを防ぐことはできません。また、私は内容を確認するために余分なボタンを持っていたくない。

$('#myCarousel').on('slide.bs.carousel', function (e) { 
    // authentication check here 

    if (isAuth === false) 
    { 
     // stay on this slide 
    } 
    else 
    { 
     // move the next one 
    } 

}) 

これを実行する方法はありますか。

注：data-interval="false"を設定して自動スライドを無効にしました。ユーザは、スライドを手動で、すなわちクリックまたは矢印キーによって手動で移動する。

Answer 1

を、イベント変数にpreventDefault()を呼び出します。これは、自動的かつ手動で起動されたスライドイベントに適用されます。

$('#myCarousel').on('slide.bs.carousel', function (e) { 
    // checks here   
    if (stop) { 
     e.preventDefault(); 
    } 
}) 

ブートストラップソースからの関連ビットについては、hereを参照してください。

自動サイクリングが有効になっている場合は、回転機能を後で自動的に再開しないため、カルーセルを一時停止することもできます（here参照）。

例（JSFiddle）についてはhereを参照してください。

Answer 2

はこのように使用：slide.bs.carouselイベントがトリガされた後、スライドを停止するには

$('#myCarousel').on('slide.bs.carousel', function (e) { 
// authentication check here 

if (isAuth === false) 
{ 
    $('#myCarousel').carousel('pause'); 
    return false; // stay on this slide 
} 
else 
{ 
    $('#myCarousel').carousel('cycle'); 
    return true; // move the next one 
} 

}）