Very straightforward question:
I've built a slider with (dynamic amount of slides), with a sidebar for expanded navigation (#slidercontrols
). Every child of this navigation sidebar should link to their own corresponding slide.
I'm currently working with a very quick, simple setup which just repeats the same code for each slide and works just fine, but I'm sure we'll all agree that it's a very messy solution. Not very DRY. For educational reasons, I'm curious how you pro's would solve this matter :)
How could you build a simple loop that directs #slidernavigation child X to slide X? You'd need some sort of dynamic selector that I'm unfamiliar with...
Well at first I would suggest that you use just one selector. Then how to recognize the index? There are many ways, but in this case one way could be storing data to div element with jQuery http://api.jquery.com/jQuery.data/
Then when you click any div, you just take the index from the saved data and use that.
If you know that the divs are always in indexed order, you could just use .index() aswell. Example with .index() http://jsfiddle.net/TsJCP/1/