Grow your CSS skills. Land your dream job.

jquery cycle manual navigation

  • # June 18, 2013 at 6:44 pm

    I’m using the jquery cycle plugin on this site to display some photos. Its set up to automatically rotate through all the slides and users the pager option to build a custom navigation. However, I would like to add the capability to click on my custom navigation to go directly to any slide.

    Please look at this [pen](http://codepen.io/margaux/pen/BwCha “”) to see what I mean. Currently the nav is positioned above the slider and clicking any of the bullets takes you directly to that slide. However, I want the nav to be positioned below the slider, but when I use the commented out css, the nav positions nicely but clicking on it doesn’t take you directly to the corresponding slide.

    any suggestions? thanks!

    # June 18, 2013 at 7:54 pm

    quick and dirty solution : use a z-index for the #indexNav a
    z-index:10 for example

    the way you should do it make #indexnav absolutelly positioned make its parent relative and then position it to the bottom your problem now is overlapping elements

    # June 20, 2013 at 6:29 am

    Thanks for the suggestion. I did as you suggested and I also had to change the jquery as per someone’s suggestion from another forum which did get it working – original pen has been updated.

    It’s thrown out the layout of the whole page so I may be back with a question in css combat. Thanks again for the reply.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".