모달 창에 부트 스트랩 캐 러셀이 있습니다. 스 와이프를 활성화 할 수 없습니다.

Question

각 페이지마다 이미지 목록을 표시하고 있습니다. 이미지를 클릭하면 모달 창이 튀어 나와 전체 페이지를 덮고 부트 스트랩 캐 러셀이 세로로 표시됩니다. 수평 중심. 모든 것이 잘 작동합니다. 방금 모바일 용 터치 스 와이프를 사용하려고했지만 더 이상 작동하지 않습니다.

이

이 내가 당신이 시도 할 수 슬쩍

$(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 코드입니다. 캐 러셀을 다시 초기화해야 할 수도 있습니다. '에'jQuery를 사용하여

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

를 재 - 초기화하는