鼠标指针从WooThemes中滑过Flexslider

Question

我正在从Woo Themes和Bootstrap 3.3.5使用Flexslider的最新版本。

我想知道是否有用鼠标指针滑动的功能？它有左和右箭头，并触摸滑动，但我似乎无法找到任何基于从PC /笔记本电脑滑动鼠标指针的东西。

这是所有我目前有至今：

<div class="flexslider"> 
    <ul class="slides"> 
      <li style="background-color: aqua;"> 
       <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> 
      </li> 
      <li style="background-color: yellow;"> 
       <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> 
      </li> 
    </ul> 
</div> 

而且我JavaScript代码：

$(document).ready(function() { 
    $('.flexslider').flexslider({ 
      animation: "slide", 
      pauseOnHover: true, 
      slideshowSpeed: 3000, 
      after: function() { 
       $('.flexslider').resize(); 
      } 
    }); 
}); 

我已经通过文档看了，但什么也找不到。

Answer 1

我在那年前就已经做到了，所以不能确定它仍然可以在Flexslider的最新版本上运行;无论如何，也许我会指出你在正确的方向... 基本上你应该添加一个拖动事件flexslider，所以： 1）首先实现jquery.event.drag插件 2）在jquery.flexslider.js添加一个块支持新的事件，就像这样：

if (vars.drag) { 
slider.bind('drag', function(event, delta) { 
event.preventDefault(); 
var target = (delta.deltaX < 0) ? slider.getTarget('next') : slider.getTarget('prev'); 
slider.flexAnimate(target, vars.pauseOnAction); 
}); 
} 

，你可以很容易地找到在哪里放置它只是找到其中的其他事件支持是，像这样的：

if (vars.mousewheel) { 
... 
} 
if (vars.drag) { 
... 
} 

3）事件添加到默认值一些：

$.flexslider.defaults = { 
... 
drag: false, 
... 
} 

4）最后激活它，当你调用Flexslider比如在你的HTML页面：

$('.flexslider').flexslider({ 
animation: 'slide', 
... 
... 
drag: true 
});