I have this code:-
<img src="/images/arrow-previous.jpg" />
<div id="product_scroller">
<ul id="product_rotator">
<li id="t1"><img src="/images/product-images/
product_title_01.jpg" alt="" /></li>
<li><img src="/images/product-images/
product_sm_01.jpg" alt="" /></li>
<li><img src="/images/product-images/
product_sm_01.jpg" alt="" /></li>
<li><img src="/images/product-images/
product_sm_01.jpg" alt="" /></li>
<li id="t2"><img src="/images/product-images/
product_title_01.jpg" alt="" /></li>
<li><img src="/images/product-images/
product_sm_01.jpg" alt="" /></li>
<li><img src="/images/product-images/
product_sm_01.jpg" alt="" /></li>
<li id="t3"><img src="/images/product-images/
product_title_01.jpg" alt="" /></li>
<li><img src="/images/product-images/
product_sm_01.jpg" alt="" /></li>
<li><img src="/images/product-images/
product_sm_01.jpg" alt="" /></li>
</ul>
</div>
<img src="/images/arrow-next.jpg" />
How can I scroll the content of the 400px div by hovering over the
arrows left or right. And how can I make it so when you click the
arrow left/right it takes you straigh to a section ie.
Click right arrow you get taken from id="t1" to id="t2"
Click left arrow you get taken back to id="t1"
Mouseover right arrow all the content in the DIV scrolls right
Mouseover left arrow all the content in the DIV scrolls left
Any help on this would be great as I'm having no luck getting this too
work like that and every code i've tried doesn't quite do this.
