CSS only slider with navigation

[Romchick]

Hi! Recently, I’ve decided to practice and build my own image/text slider by checkboxes. And faced two problems:
1. How to make labels to react on :checked events, for example, to highlight current position?
2. And navigation arrows. In my example I made very dummy arrows which are lables inside each of content box. So the bad thing is when the height of slider wrapper changes – the position of these arrows changes too. Not very UI friendly.
Here is “the demeo. Can someone put me on the right things to do?

[Paulie_D]

I think you missed the demo linking…

Codepen is the place for this so we can tinker with the code.

Frankly though I’ve never found these checkbox/radio navigation type things that effective. A lot of CSS for something that a few lines of JS can do…and would work for almost unlimited size sliders.

[Romchick]

Yeah, smt went wrong, here is the link: http://codepen.io/NeedHate/pen/XbRraW

I understand that JS will do it excelent. But I can “read” only complete code. So also I want to begin to learn JS/Jquery with this slider experiment.

[Paulie_D]

I don’t understand…

But I can “read” only complete code.

This sounds like you want someone to write it for you so you can understand it…that’s not what we do here.

I want to begin to learn JS/Jquery with this slider experiment.

Perfect opportunity.

There are lots of tutorials out there on how to do exactly this…Try it.

The JQuery docs are packed with examples, you just have to try stuff, parse out what each line does…(make comments) and go from there.

I did…I’m no expert in JQ but I don’t automatically switch off when someone asks about it.

I’ll go through it line by line, refer to the API docs and try and figure it out.

If I still can’t get it…then I ask questions.

I suspect for 90% [made-up number] of what we want to do most of the the standard JQ effects (slides/toggles etc) will work just fine…and they’re easy.

[Romchick]

Because of poor knowledge in JS/JQ I’m trying to figure out it throug CSS. Thats why I asked this question here. Nothing more. And believe me, I dont want anyone to do what I need. Ok, I get it. Its alot of coding to make slider in CSS. I heard what I want.

[Author]

Posts