I'm trying to add a navigational aid to a carousel that I'm working on. Basically, I want to visually display the number of results in the carousel and then highlight the result that is currently in the first position as the user scrolls through the result set - providing a visual cue to the user as to where they are in the result set. I've seen this before on other carousels and it's sort of the same concept that Apple uses in the iPhone and iPod screens. I know this can be done rather easily with a bit of jQuery, but my brain is fried. You can see a mock-up of what I'm trying to achieve here:
http://rule13.com/development/carousel.gif I'm trying to loop through the result set and count how many items are returned... then display something like the image above. As a user navigates through the carousel, an active state is added to the visual cue. The code I am working with for the visual cue section is currently just a bunch of span tags (I'm open to alternate approaches). The number of <span> tags returned would be the same number of results returned in the carousel. <div class="visual-cue"> <p><span></span><span></span><span class="active"></ span><span></span><span></span><span></span><span></span><span></ span><span></span><span></span></p> </div> Here's the CSS: /* visual cue */ #accessorize div.visual-cue {height:16px; line-height:16px; position:absolute; right:0; width:266px; top:-40px;} #accessorize div.visual-cue p {text-align:right; line-height:16px; float:right;} #accessorize div.visual-cue p span {display:block; background:#fff; width:10px; height:10px; border:2px solid #EFEFEF; margin-left:2px; float:left;} #accessorize div.visual-cue p span.active {background:#D3D3D3; border: 2px solid #D3D3D3;} Does anyone know how I can achieve this or can someone steer me in the right direction? Thanks.
