鼠標指針從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 
});