Anchor tag click not working in CSS slider

Question

I would like to use the following CSS slider in my project

http://jsfiddle.net/63w9jnqq/1/

It does not using any JavaScript or jQuery. When I clicking on the link from any slide other than the 'slide 5' takes me back to the first 'slide 5' instead of opening a new tab. It is CSS heavy code, I have no idea about how to fix it. I have no problem to use extra jQuery or JavaScript to fix this issue.

I tried the following jQuery to stop click action, it does not working

$(document).ready(function(){
    $(".slide-gfx a").click(function(event){
        event.preventDefault();
    });
});

Answer 1

:focus state

The cause of this issue is down to the fact that the slideshow is relying on the :focus handling of CSS to remember state. This is a very temporary handler, which is lost whenever a new element is focused. I built the slideshow more for non-interactive elements, just to demo visual work — this works fine with :focus

The slideshow reverts back to slide 5 (or the end slide) when none of the slides are focused. This was fine for my needs, but obviously not for your use-case. This is occurring when you focus on your <a href="" /> elements.

Limitations of css

Unfortunately there is no way to match (in current CSS) up to a parent from a focused child — at least not that I am aware of. This would solve the issue with pure CSS. You can obviously match downwards (i.e. parent:focus .child), but that doesn't help. You can employ the The checkbox/radio hack which I did consider at the time, or you can switch to using a different way of "remembering state".

:target state

The CSS in the original demo was already tailored to also support :target as an alternative, so you can patch current functionality with a small bit of JS. I wouldn't want to rely on this across older browsers however — but then again, older browsers would probably find it hard to cope with this system anyway.

Snippet and fiddle

This patch listens for the :focus event, and sets the fragment in the URL to match the id of the slide. This means that the CSS then switches to listening to the :target selectors instead, which should keep the right slide selected.

http://jsfiddle.net/63w9jnqq/4/

$('.slide').on('focus',function(e){
  window.location.hash = $(this).attr('id');
});

Recommendation

Going forward, I'd suggest perhaps looking at more recent methods for implementing CSS. As I'm sure there are a lot of new improvements that could be used to extend the system — something I haven't had time for of late. There may even be handling to integrate touch-style events to make things more naturally mobile friendly, although perhaps that is just wishful thinking.

At the end of the day, even though there is a lot of CSS in this solution, it is best to try and understand every part of the code you use in your projects — as that helps to debug situations you might find yourself in. This issue is mentioned in the original post here, and the solution using :target is employed to handle the "sub nav" links:

Implement a CSS-only slideshow / carousel with next and previous buttons?