Question

我使用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似乎没有解决我的问题。

感谢您的帮助：）

Answer 1

随着Orbit Slider很快被弃用，ZURB建议使用光滑的滑块（http://kenwheeler.github.io/slick/）向前移动。

更换旧的轨道飞行器非常容易，肯在这里提供了一个简单的解释： 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（例如没有更多的轨道标题等）。

在触摸设备上不会触发基础5轨道点击 - 链接不起作用

1 个答案: