Orbit Carousel href links in content not working

[lenrooney]

I've been working with Joints since February 2019 and I'm steadily learning Foundation and getting some good results. However, I just coded a series of Orbit Carousels only to finally discover that none of html a href links included in the slide contents are working. I discovered this late because each link registers the hover event and my browser shows it displaying the correct url on hover, so I thought there would be not problem, but there is no click event!

I've been all over Zurb Foundation and Google on this and the best answers seem to point to a z-index fix: .orbit-container .orbit-timer { z-index: 9999; } but that doesn't work for me. Nor does it make sense to raise the .orbit-container above any layer my links are on.

Other comments contend that it may have something to do with the way Orbit implements touch on the .orbit-container, which makes sense.

Another suggestion is to switch to either Owl Carousel or Slick Carousel. Owl Carousel is widely used in themes to display name-drop 'partner' links and would be my first choice. The trouble is, although I can see that both Owl and Slick are available in /node_modules, I have no idea how to compile/reference/call those into my project. I know it's a noob question, but I'm way behind on my understanding of the workings of node, npm, grunt. Can someone here help point me in a direction I need to go, or point me to a good tutorial or knowledge overview?

Thanks!

[garretthyder]

Hi @lenrooney

Not sure if you're still interested in getting Orbit to work. But I've had that issue previously and the fix was raising the z-index of the active slide; .orbit-container .orbit-slides-container > *.active{ z-index: 9999; } Reference - https://foundation.zurb.com/forum/posts/1639-link-inside-orbit-content-slider-do-not-work

I did notice in the thread there's a issue with FF for this which is fixed with the following;

.orbit-container .orbit-prev, .orbit-container .orbit-next { z-index: 10000; }
.orbit-container .orbit-timer { z-index: 10000; }

Hope that fix is simple enough, if you need to continue to pursue Slick or Owl then let me know and I'll try to help. Cheers

[lenrooney]

Hi @garrett-eclipse

Thanks! That first line worked! I had actually tried this exact line from the same source before and thought it wasn't working because in Safari, the .orbit-containter, on click, still gets edge highlighted as active. That combined with a slow response because my mangled urls where actually leading to a 404 pages. At the end of a long night it all lead me to believe that it wasn't working.

I'm sure I can now deal with the .orbit-container getting highlighted and complete this task, but I'm still left wondering how to leverage the wealth of scripts available in node_modules into future tasks and projects. If you could shed any light in that direction, I'd be even more grateful.

Thanks so much again for your help! Huge! Cheers!

[garretthyder]

Awesome that's great news @lenrooney

As to node_modules, you don't want to directly reference these in your build as often they're not uploaded to the live site. Instead you can add references to scripts in your node_modules into the gulpfile.js to be combined into your scripts file as is done with the what-input.js seen here; https://github.com/JeremyEnglert/JointsWP/blob/master/gulpfile.js#L24

Hope that helps, going to close this out as it's not directly JWP related.

[lenrooney]

@garrett-eclipse

That'll do it. Thanks again!