javascript - WooThemes的Flexslider中的鼠标指针滑动

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

我想知道是否有使用鼠标指针滑动的功能？它具有向左箭头和向右箭头并轻扫，但是我似乎无法基于从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();
          }
     });
});

我已经浏览了文档，但找不到任何东西。

最佳答案

我是在那年前做的，因此请确保它在最新版本的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）最后，当您在HTML页面中调用Flexslider实例时将其激活：

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

关于javascript - WooThemes的Flexslider中的鼠标指针滑动，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33540023/