Foundation 5 Orbit 点击不会在触摸设备上触发 - 链接不起作用答案

【问题标题】：Foundation 5 Orbit click is not fired on touch devices - links don't workFoundation 5 Orbit 点击不会在触摸设备上触发 - 链接不起作用
【发布时间】：2014-05-28 16:59:19
【问题描述】：

我正在使用 Foundation 5 Orbit 使用图片填充和顶部的自定义标题来显示图像。在桌面上一切正常，但在触摸设备（例如 Android、iPhone）上，无法单击环绕整个幻灯片的链接。当我设置时它确实有效

swipe: false;

所以我怀疑滑动的触摸监听器以某种方式阻碍了点击的触发。我设置的其他选项：

data-options="pause_on_hover:false;bullets:true;slide_number:false;timer_show_progress_bar:true;navigation_arrows:false;next_on_click:false;"

请在下一页查看演示

http://experiencesap.staging.wpengine.com/designservices

我将 Foundation 5.2.2 与

结合使用

jQuery 2.1.1
FastClick 1.0.2
Modernizr 2.8.2

https://github.com/zurb/foundation/issues/3171 似乎没有解决我的问题。

感谢您的帮助:)

【问题讨论】：

我仍然遇到这个问题 - 根据 github 问题跟踪器 (github.com/zurb/foundation/pull/4934)，它已修复并关闭，但我正在运行 5.2.3，并且我的任何链接都没有在轨道内滑块正在触摸设备上工作。它们处于悬停状态，但实际上并没有链接。
看起来你已经成功了，你能详细说明你做了什么让你的轨道链接在移动设备上工作（它们似乎在我的 iPad 上工作）？
目前，我设置了swipe: false，但这显然也不是最理想的选择。

标签： javascript android jquery touch zurb-foundation

【解决方案1】：

随着 Orbit Slider 即将被弃用，ZURB 建议继续使用光滑滑块 (http://kenwheeler.github.io/slick/)。

更换旧的轨道飞行器非常容易，Ken 在这里提供了一个简单的解释： http://kenwheeler.github.io/slick/#getting-started

对我来说，这是一个工作的、可滑动的滑块的诀窍：

    $('.your-class').slick({
    arrows: false,
    draggable: false,
    dots: true,
    autoplay: true,
    cssEase: 'ease',
    speed: 500,
    easing: 'linear',
    slide: 'article', //element inside of the wrapping '.your class' that you want to become a slide
    swipe: true
});

我建议仔细查看他的 css，因为样式在某种程度上是由 Ken “预先定制”的，因此您可能需要用自己的样式覆盖一些类。

另外，请记住，Slick 会有更多/不同的包装器，这可能需要重新设计您现有的一些 CSS（例如，不再有轨道标题等）

【讨论】：