bootstrap carousel в модальном окне - не может активировать swipe

Question

Я перепроектирую свой сайт, на каждой странице я показываю список изображений, если вы clcik на нем, появляется всплывающее модальное окно, охватывающее всю страницу и отображающее карусель начальной загрузки по вертикали и горизонтально по центру. Все работает нормально. Я просто попытался включить сенсорный салфет для мобильного телефона, но он больше не работает.

Это код JS, который работает

/* 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 // 

Это немного, что я добавил для того, чтобы красть

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

Answer 1

Вы можете попробовать это. Возможно, вам придется повторно инициализировать карусель.

$(".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

Попробуйте использовать JQuery «на» вместо этого, это может предотвратить необходимость повторного инициирования каруселью

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