I have searched high and low, but have found very little to achieve my desired result, I am trying to take a bunch of images, and create a smooth auto scrolling horizontal image scroller, similar to this http://www.enova-tech.net/eng/lab/jmycarousel/1, the problem I have is that this plug-in was built on jQuery 1.3.2 if I am not mistaken, so I would like to create my own, but with the jQuery 1.4.2, so now to the question.
Any other plug-ins that you know of that can achieve the same kind of auto scrolling effect? If not, how should I go about creating a scroller like this?
The only thing that is boggling my mind is how I can get the scroller to auto scroll continuously, any ideas?
The HTML markup would look something like this:
HTML:
<div id="container">
<div><img src="/image1.jpg" /></div>
<div><img src="/image2.jpg" /></div>
<div><img src="/image3.jpg" /></div>
<div><img src="/image4.jpg" /></div>
<div><img src="/image5.jpg" /></div>
<div><img src="/image6.jpg" /></div>
<div><img src="/image7.jpg" /></div>
<div><img src="/image8.jpg" /></div>
</div>
Thanx in advance!
A libary I am happy with is the jQuery innerfade.
The javascript:
$('#image_rotate').innerfade({
speed: 'slow',
timeout:3000 ,
type: 'sequence',
containerheight: '248px'
});
And the HTML:
<ul class="innerfade" id="image_rotate" style="list-style: none outside none;">
<li><img src="/getattachment/1c0b7e7c-5a17-48f3-ba21-f3ff59a70423/.jpg" /></li>
<li><img src="/getattachment/8d5556dd-6331-48aa-b419-d64f1de9745e/.jpg" /></li>
<li><img src="/getattachment/65a0474f-9afa-414f-85f1-7cda5ccfffee/.jpg" /></li>
<li><img src="/getattachment/65f553eb-a07a-4c30-93ab-f9bbf6784139/.jpg" /></li>
<li><img src="/getattachment/84ec5f3d-c5a3-40e1-a680-7d27de35ec95/.jpg" /></li>
<li><img src="/getattachment/4a393530-5bdb-4417-be20-0e55981db159/.jpg" /></li>
</ul>
EDIT: Requires that you include the jQuery libary first, then the innefadelibary. Look at the link in the post