Building slider controls to target specific slides

Building slider controls to target specific slides

I have a slider set up that navigates fine using 'next' and 'prev' buttons. There are 14 slides and I have 5 buttons at top that I need to point to specific slides in the layout. Content is static and there will always be 14 slides, and the links will always link to the same slide.

So I can manually set IDs for those slides and I can also manually designate each link to go to whatever slide... but I'm not sure how to move forward.

My existing slider code is very basic:

  1. $("#slider").cycle({ 
  2. fx:     'scrollHorz', 
  3. timeout: 0, 
  4. next:   '.next', 
  5. prev:   '.prev',
  6. });
... and the layout code is also pretty basic (obviously not semantically correct, just so you have an idea):

  1. <div#wrapper>
  2.       <div#navlinks>
  3.             <a href="#linktoslide1"></a>
  4.             <a href="#linktoslide4"></a>
  5.             <a href="#linktoslide7"></a>
  6.       </navlinks>
  7.       <a class="prev"></a>
  8.       <a class="next"></a>
  9.       <div#slider>
  10.             <div#slide1></div>
  11.             <div#slide2></div>
  12.             <div#slide3></div>
  13.             <div#slide4></div>
  14.             <div#slide5></div>
  15.             <div#slide6></div>
  16.             <div#slide7></div>
  17.       </slider>
  18. </wrapper>
So, the slider is working great. I just need to create navigation that allows a few links to point to specific slides here.