jquery - pure css slider

Question

I'm trying to get one pure css slider (http://jsfiddle.net/trN4p/1/) to operate within another pure css slider on the same document/page using :target for navigation with independent control for each slider.

Here is an example of the problem: http://jsfiddle.net/J6htH/4/

I want the inside (CHILD) slider to work independently of and alongside (w/out conflict) the outside (PARENT) slider.

I was wondering if there is a way to separate the two sliders so that their list items (and hash tags) operate relative to the slider and not the whole page/dom? Is there some jQuery/Ajax magic or JS templating (backbone/underscore) tricks to do this?

Answer 1

I hate to say it (because I understand how awesome it feels to make really cool things in pure CSS), but you should use JavaScript.

Bear with me here, and comment if you feel i'm being unreasonable:

You can only have a single element that's matched as :target, because you can only have one hashtag, so at most you can have one slider set to a particular item at a time (the other would return to default). This is the constraint, whether you like it or not.

On the other hand, HTML+CSS+JS is a great example of the Model-View-Controller pattern/model/concept.

• HTML is the Model as it contains all the data
• CSS is the View as it contains all the styles
• JS is the Controller as it defines how the user, data and styles interact with each other.

You're trying to make a slider which involves user interactions. The triggering events (like click) should really be handled by the Controller, not the View.

tl;dr:

You can't do what you're describing in pure CSS.