Flexslider 手动控制不起作用

Posted 2023-04-13

【中文标题】Flexslider 手动控制不起作用

【英文标题】：Flexslider manualControls not working

【发布时间】：2013-02-21 05:21:17

【问题描述】：

我已经使用 Flexslider 创建了一个滑块，我正在尝试使用 manualControls: 创建导航菜单，但链接不起作用。这是 flexslider 和滑块/导航本身的代码：

弹性滑块：

 <script type="text/javascript" charset="utf-8">
  $(window).load(function() 
    $('.flexslider').flexslider(
      controlsContainer: ".slidercontainer",
      controlNav: true,
      manualControls: ".flex-control-nav li",
      ); 
 );
 </script>  

滑块和导航：

    <div class="slidercontainer">
        <div class="flexslider">
            <ul class="slides">
              <li>slide1</li>
              <li>slide2</li>
            </ul>
            <ul class="flex-control-nav">
              <li>1</li>
              <li>2</li>
            </ul>
    </div>          
    </div>

【参考方案1】：

你解决了吗？如果没有，答案是因为 FlexSlider 在插件中仍然有一个实时事件 - 但 jQuery 已弃用它。

修复它；打开 jQuery.flexslider.js 并对“live”进行查找/替换，将其替换为“on”。我实际上搜索了 ".live(" 并替换为 ".on(" 只是为了确保我只有事件侦听器。有 2 次出现。

就是这样。完美运行！

【讨论】：

刚刚做了这个。效果很好！令人惊讶的是他们还没有更新。

【参考方案2】：

https://github.com/woothemes/FlexSlider/issues/351

听起来有很多事情要做。

我主要使用 Chrome，不管这个主题是什么，我都会遇到这种情况：

http://www.templatemonster.com/demo/42317.html

它所说的 FlexSlider 版本：jQuery FlexSlider v1.8

但我找到了解决办法：

http://wordpress.org/support/topic/chrome-bug-with-flexslider-plugin

线程结束，一个人发布了指向他修复的另一个站点的链接！我在下面发布了必要的行：

jquery.flexslider.js 中的第 34 行

slider.eventType = ('ontouchstart' in document.documentElement) ? 'touchstart' : 'click';

我将其替换为以下两行：

slider.touch = (( "ontouchstart" in window ) || ( window.navigator.msPointerEnabled ) || window.DocumentTouch && document instanceof DocumentTouch) && slider.vars.touch;
slider.eventType = "click touchend MSPointerUp";

希望对您有所帮助。

【讨论】：

谢谢。解决了我的问题。

【参考方案3】：

示例链接：http://flexslider.woothemes.com/

你可以简单的直接使用代码

$(window).load(function() 
  $('.flexslider').flexslider(
    animation: "slide"
  );
);

【讨论】：

不太清楚你的意思

我很确定你必须定义导航容器。从所有的例子看来都是这样。它将一个活动类应用于导航中的第一个链接，因此它知道应该发生什么，但点击时什么也没有发生。

【参考方案4】：

我刚刚遇到了同样的问题，这是由于在 chrome 的“chrome://flags”页面中启用了触摸事件，关闭触摸事件后，flexslider 导航箭头和点将起作用。

代码中有几个地方 flexslider 会尝试解决 ios 错误，但这样做会完全禁用非 iOS 具有触摸功能的浏览器上的点击事件。

【参考方案5】：

我使用的是 2.7.2 版本，我所做的是我评论了 onTouchMove = function(e) 中的所有内容

之后，一切仍然正常，最重要的是错误消息消失了。