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

How to add swipe feature to images within modal

本文关键字：添加 功能 图像 模态      更新时间：2023-09-26

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

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

对于Carousel，它基本上是用加载到Twitter模式中的

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

这是我的HTML结构。

那么，我如何在模式窗口中为图像添加滑动效果，并在该模式窗口中加载所有图像呢？

您只需要包含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演示

相关文章：