模式窗口中的引导转盘-无法激活卷帘

Question

我正在重新设计我的网站，在每个页面我都会显示一个图片列表，如果你点击它，会弹出一个模式窗口，覆盖整个页面，并显示一个垂直和水平居中的引导转盘。一切都很好。我刚刚试着为手机启用触摸滑动，但它不再起作用了。

这是可以工作的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 'on‘，这可能会避免重新初始化轮播

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