模式窗口中的引导轮播 - 无法激活滑动答案

【问题标题】：bootstrap carousel in modal window - cannot activate swipe模式窗口中的引导轮播 - 无法激活滑动
【发布时间】：2026-01-08 05:50:01
【问题描述】：

我正在重新设计我的网站，在每个页面中，我都会显示一个图像列表，如果您在其上单击，则会弹出一个模式窗口，覆盖整个页面并垂直和水平居中显示引导轮播。一切正常。我刚刚尝试为移动设备启用触摸滑动，但它不再起作用了。

这是有效的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');
  });
});

【问题讨论】：

标签： javascript jquery twitter-bootstrap carousel swipe

【解决方案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);
});

【讨论】：

【解决方案2】：

尝试使用 jQuery 'on' 代替，这可能会避免重新初始化轮播的需要

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

【讨论】：