在 WooThemes 的 Flexslider 中滑动鼠标指针

Question

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

请问有没有鼠标滑动的功能？它有左右箭头和触摸滑动，但我似乎无法找到任何基于从 PC/laptop.

使用鼠标指针滑动的东西

这是我目前所有的：

<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) 当您在 HTML 页面中调用 Flexslider 实例时，最后激活它：

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

在 WooThemes 的 Flexslider 中滑动鼠标指针

Mouse pointer swiping in Flexslider from WooThemes

javascript

css

jquery

carousel

flexslider