Clicking Doesn't Work in Slider on Any Browser Besides IE

Hi dcogen,

Thanks for using my plugin, and I apologize for the troubles. Oddly enough, when I went to your site in Firefox v21, I had no troubles navigating the slider by clicking the arrows, so I’m not sure why it isn’t working for you.

Regarding the slider hyperlinks not being active, technically they are but the mouse isn’t changing because of how the browsers are interpreting the CSS. If you put your mouse above the control-nav container (the dots that allow you to jump to a specific image in the carousel), you’ll note the image now becomes clickable. If you use Chrome Developer Tools or Firebug on Firefox, you’ll see the control-nav container is covering nearly the entire image. For whatever reason, IE ignores the container. Ultimately, you’ll need to locate your control-nav container at or below the bottom of the image for the images to work as expected.

Thanks for getting back to me so quick.
Just checked Firefox and it works for me too, not sure what that was before.

Anyway though, about the images being clickable I see what you mean about the image being clickable if I put my moust about the nav dots.

Is there no way to make the entire image clickable? What is IE doing and can we replicate it.
Saw on the internet somewhere that someone else might of had the same issues with their slider because of the touch events. Something about a fix for iOS touch events that is blocking Chrome because it too uses touch events now and your fix it targeting only iOS and is conflicting with it?

If not that then is there anything else I can do to make the images clickable across the entire image? Thanks for all your help. I’m sure this issue is something that, when solved, would help a lot of users trying out the plugin.

IE is essentially ignoring the z-index of absolutely positioned elements (see: https://stackoverflow.com/questions/11380117/cant-click-div-with-links-behind-another-div-absolute-position-wont-work), which I guess it shouldn’t be doing, but is.

Based on what I’ve read there’s no real workaround for this specific situation, because we need both elements (the slides and the dots) to be clickable, which leaves two options. Rework the php to position the control-nav container before the slides container, which would allow positioning the control-nav container at the top of the image, or leave the control-nav container at the bottom of the image.

Hmm.. I see. What about removing the control nav (which I assume just contains the dot navigation, correct?)
I’d rather not have it and have clickable images and arrow nav only.

Where is the control nav element and can I just comment it out? Think that might solve it?

Thanks again for all your help.

yes, the control-nav contains the dots only. You can hide that entirely by adding display:none; to the flex-control-nav section

Got it that worked thanks!

Really quick, if I wanted to move it above the slider, could I do that simply within the same section of CSS?

Unfortunately that would have to be done through PHP… CSS can’t position it (it’s why you have this problem in the first place)