如何向模式內的圖像添加輕掃功能

Question

我無法找到在Twitter Bootstrap模式中輕掃圖像的解決方案。現在我用

// Swipe feature 
$('#myCarousel').swiperight(function() { 
    $('#myCarousel').carousel('prev'); 
}); 
$('#myCarousel').swipeleft(function() { 
    $('#myCarousel').carousel('next'); 
}); 

的旋轉木馬它基本上加載到Twitter的模態與

('.modal-trigger img').click(function(e) { 
    $('#myModal img').attr('src', $(this).attr('data-img-url')); 
}); 

這是我HTML structure。

那麼，即使在模態窗口中如何添加滑動效果，並在該模式窗口中加載所有圖像？

Answer 1

你只需要包括jQuery Touchwipe Plugin (iPhone, iPad, iPod Touch Gesten/Gestures, Wischeffekt/Wipe Effect)並執行以下操作：

$('#myCarousel').touchwipe({ 
    wipeLeft: function() { 
    alert('next') 
    $('#myCarousel').carousel('next'); 
    }, 
    wipeRight: function() { 
     alert('prev') 
     $('#myCarousel').carousel('prev'); 
    }, 
    min_move_x: 20, 
    preventDefaultEvents: false 

}）;

這裏是JSFIDDLE DEMO