鼠标指针从WooThemes中在柔性滑块中滑动

Question

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

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

到目前为止，我所拥有的只有这些：

<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上起作用；不管怎样，我会给你指明正确的方向.基本上，您应该向柔性滑块添加一个拖动事件，因此: 1)首先实现jquery.event.drag插件in 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)在调用HTML页面中的Flexslider实例时，最后激活它：

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