jQueryUI ContentSlider Question

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!

Answer 1

Creating a second UL doesn't work because the API doesn't know what to do with it.

If you look at jQueryUI's source, the _tabify function only takes ul:first and does it's jQuery magic on it to turn it into a real tab panel. So aside from messing with jQueryUI, you can just call the select method of the tab directly (note the zero-based index). Is this what you need? This works for me:

<div id="teaseContent">
   <div id="teaseContent-1" class="slide ui-tabs-panel">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
   <div id="teaseContent-2" class="slide ui-tabs-panel">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div>
   <div id="teaseContent-3" class="slide ui-tabs-panel">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</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="#teaseContent-1">Nav 1</a></li>
     <li id="nav-slide-2" class="alpha ui-tabs-nav-item"><a title="..." href="#teaseContent-2">Nav 2</a></li>
     <li id="nav-slide-3" class="alpha ui-tabs-nav-item"><a title="..." href="#teaseContent-3">Nav 3</a></li>
   </ul> 

   <ul>
     <li><a href="#" onclick="$('#teaseContent').tabs('select',0); return false;">#1</a></li>
     <li><a href="#" onclick="$('#teaseContent').tabs('select',1); return false;">#2</a></li>
     <li><a href="#" onclick="$('#teaseContent').tabs('select',2); return false;">#3</a></li>
   </ul> 
</div>

jQueryUI ContentSlider Question

Follow this question

Related questions