I recommend, you take a look at the jCarouselLite plugin. Even if you don't use the plugin itself (if your intention is to learn), the code there will provide some starting point, because i guess it solves the same problem that u r trying to solve.
http://www.gmarwaha.com/jquery/jcarousellite/index.php -GTG On 8/22/07, littlerobothead <[EMAIL PROTECTED]> wrote: > > > 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">«</a> > <a id="next">»</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 > >
