I'm trying (for learning, and out of stubborness) to build an image
slider. The code I'm using, and my issue, follows.

<script type="text/javascript" charset="utf-8">
        $(document).ready(function() {
                        $('div#features:eq(0) > div:not(:first)').hide(); // 
Hides all but
the first feature story
                        $('#next').bind("click",function() {
                                $('div.content > ul li:visible:first').hide();
                });
                        $('#prev').bind("click",function() {
                                $('div.content > ul 
li:visible:first').prev('li').show();
                });
        });
</script>
<div class="content">
        <ul>
                <li><img src="../img/film_strip/abba-still.jpg" width="130"
height="95" alt="Abba Still" /></li>
                <li><img src="../img/film_strip/hairspray130.jpg" width="130"
height="95" alt="Hairspray130" /></li>
                <li><img src="../img/film_strip/harry.gif" width="82" 
height="60"
alt="Harry" /></li>
                <li><img src="../img/film_strip/oysters.gif" width="82" 
height="60"
alt="Oysters" /></li>
                <li><img src="../img/film_strip/pottercover130.jpg" width="130"
height="95" alt="Pottercover130" /></li>
                <li><img src="../img/film_strip/simpsons.gif" width="82" 
height="60"
alt="Simpsons" /></li>
                <li><img src="../img/film_strip/sopranos.gif" width="82" 
height="60"
alt="Sopranos" /></li>
                <li><img src="../img/film_strip/speedracer75x55.jpg" width="75"
height="55" alt="Speedracer75x55" /></li>
        <ul>
</div>
<div class="controls">
        <a id="prev">&#171;</a>
        <a id="next">&#187;</a>
</div>


My issue is that the slider scrolls as I want it to when clicking on
the "prev" anchor--i.e., it scrolls only until it reaches the first
<li>, then stops. However, clicking on the "next" anchor moves the
"content" div on and on until it leaves the container. How do I get
the "prev" and "next" anchors to behave the same way?

In a perfect world, the content div would behave as if it were a loop.
But I tried to make that happen last night to no avail. For now, I'd
be happy just to iterate through all the li items from right to left
until there aren't anymore.

I hope this makes sense. This code is the product of both a deadline
and three hour's sleep. I have Karl's book on the way, but until it
gets here this group is my Obi Wan.

Best to all,
Nick

Reply via email to