Foundation 5 Orbit click is not fired on touch devices - links don't work

Question

I am using the Foundation 5 Orbit to display images using picturefill and a custom caption on top. Everything works fine on the desktop, but on touch devices (eg Android, iPhone) the links that wrap around the entire slide can not be clicked. It does work when I set

swipe: false;

So I suspect that the touch-listener for the swipe somehow gets in the way of a click being fired. Other options I have set:

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

Please view the demo on the following page

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

I use Foundation 5.2.2 in conjunction with

• jQuery 2.1.1
• FastClick 1.0.2
• Modernizr 2.8.2

https://github.com/zurb/foundation/issues/3171 does not seem to have solved my issue.

Thanks for your help :)

Answer 1

With the Orbit Slider becoming deprecated soon, ZURB has recommended to use the slick slider ( http://kenwheeler.github.io/slick/ ) moving forward.

Replacing your old orbiter is extremely easy, and Ken has provided an easy explanation here: http://kenwheeler.github.io/slick/#getting-started

For me, this does the trick for a working, swipable slider:

    $('.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
});

I recommend taking a closer look into his css, as the styling is somewhat more "pre-customized" by Ken, so you may have to overwrite some classes with your own stylings.

Also, keep in mind that Slick will have a more/different wrappers, which may require to reengineer some of your existing CSS (eg no more orbit-caption etc.)