Question

我找不到在Twitter Bootstrap模式中滑动图像的解决方案。现在我正在使用

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

用于Carousel，基本上用

加载到Twitter Modal中

('.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

如何在模态中为图像添加滑动功能

1 个答案: