jQueryUI ContentSlider Question

Hi,

I'm pretty new to jQuery and jQueryUI and I'm eager to try out things. This time, I want to create a content slider than has auto play and can jump to a specific slide. I was able to sort things out for those two rules, but then I want to add a bullet indicator which also replicates the "jump to slide" functionality of #slideNav.

I have tried repeating the same code and attaching a different id (#bullet) but I couldn't get it to work. (I know this would violate web standards- ID uniqueness).

Here's my code:

   <div id="teaseContent">
        <div id="slide-1" class="slide ui-tabs-panel">...</div>
        <div id="slide-2" class="slide ui-tabs-panel">...</div>
        <div id="slide-3" class="slide ui-tabs-panel">...</div>

     <ul id="slideNav" class="ui-tabs-nav clearFix">
        <li id="nav-slide-1" class="alpha ui-tabs-nav-item ui-tabs-selected"><a title="..." href="#slide-1">Nav 1</a></li>
        <li id="nav-slide-2" class="alpha ui-tabs-nav-item"><a title="..." href="#slide-2>Nav 2</a></li>
        <li id="nav-slide-3" class="alpha ui-tabs-nav-item"><a title="..." href="#slide-3">Nav 3</a></li>
     </ul> 

     <ul id="bullet" class="ui-tabs-nav clearFix">
        <li id="nav-slide-1" class="alpha ui-tabs-nav-item ui-tabs-selected"><a title="..." href="#slide-1">#1</a></li>
        <li id="nav-slide-2" class="alpha ui-tabs-nav-item"><a title="..." href="#slide-2>#2</a></li>
        <li id="nav-slide-3" class="alpha ui-tabs-nav-item"><a title="..." href="#slide-3">#3</a></li>
     </ul> 

    </div>

Here's the head code: (Using jQuery 1.4.2, jQueryUI 1.7.2)

  <script type="text/javascript">
    $(document).ready(function(){   
       //service slide
       $("#teaseContent").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 3000, true); 
    });      
  </script>

Any ideas on how to make this work? Hope someone could lend a hand and point out some advice :) thanks!

ansaurus

tags:

views:

answers:

jQueryUI ContentSlider Question

related questions