モーダルウィンドウ内のブートストラップカルーセル - スワイプをアクティブにできません

Question

私は自分のウェブサイトを各ページに再デザインしています。イメージのリストを表示しています。その上にclcikを置くとモーダルウィンドウがポップアップしてページ全体を覆い、ブートストラップカルーセル水平にセンタリングされる。すべてうまく動作します。私はちょうどモバイルのタッチスワイプを有効にしようとしましたが、もう動作しません。

この

これは私はあなたがこれを試すことができますスワイプ

$(document).ready(function() { 
    $("#modalCarousel").swiperight(function() { 
    $(this).carousel('prev'); 
    }); 
    $("#modalCarousel").swipeleft(function() { 
    $(this).carousel('next'); 
    }); 
}); 

Answer 1

を有効にするために追加したビットである

/* copy loaded thumbnails into carousel */ 
$('.immagini .thumbnail').on('load', function() {}).each(function(i) { 
    if (this.complete) { 
    var item = $(''); 
    var itemDiv = $(this).parents('div'); 
    var title = $(this).parent('a').attr("title"); 

    item.attr("title", title); 
    $(itemDiv.html()).appendTo(item); 
    item.appendTo('.carousel-inner'); 
    if (i == 0) { // set first item active 
     item.addClass('active'); 

    } 
    } 
}); 

/* activate the carousel */ 
$('#modalCarousel').carousel({ 
    interval: false 
}); 

/* change modal title when slide changes */ 
$('#modalCarousel').on('slid.bs.carousel', function() { 
    $('.modal-title').html($(this).find('.active').attr("title")); 
}) 

$('.immagini .thumbnail').addClass("point"); 

/* when clicking a thumbnail */ 
$('.immagini .thumbnail').click(function() { 

    var idx = $(this).parents('div').index(); 
    var id = parseInt(idx); 

    $('#myModal').modal('show'); // show the modal 


    $('#modalCarousel').carousel(id); // slide carousel to selected 
}); 

$(".myModal").on('show.bs.modal', function() { 
    setTimeout(function() { 
    $(".modal-backdrop").addClass("modal-backdrop-fullscreen"); 
    $(".modal").addClass("modal-fullscreen"); 
    $(".modal-body").removeAttr("style"); 
    }, 0); 
}); 

$("#myModal").on('hidden.bs.modal', function() { 
    $(".modal-backdrop").addClass("modal-backdrop-fullscreen"); 
}); 

// Vertical centered modals // you can give custom class like this // 

作品jsのコードです。カルーセルを再初期化する必要があるかもしれません。

$(".myModal").on('show.bs.modal', function() { 
    setTimeout(function() { 
     $(".modal-backdrop").addClass("modal-backdrop-fullscreen"); 
     $(".modal").addClass("modal-fullscreen"); 
     $(".modal-body").removeAttr("style"); 
     $('#modalCarousel').carousel() 
     $("#modalCarousel").swiperight(function() { 
      $(this).carousel('prev'); 
     }); 
     $("#modalCarousel").swipeleft(function() { 
      $(this).carousel('next'); 
     }); 
    }, 0); 
}); 

Answer 2

ではなく、これは再初期化カルーセル

Query(".selector").on("swiperight", function(event) { ... }) 

の必要性を防ぐことが「オン」にjQueryを使用してみてください