1

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!

Odyss3us
  • 6,457
  • 18
  • 74
  • 112
  • if i ask google for "jquery carousel plugin" (http://www.google.de/#sclient=psy&hl=de&q=jquery+carousel+plugin&aq=2&aqi=g4g-o1&aql=&oq=&gs_rfai=&pbx=1&fp=68cd5877826b624c) i get a lot of nice looking things, complatible with the newest jquery... – oezi Nov 26 '10 at 09:42

1 Answers1

0

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

Jan Sverre
  • 4,617
  • 1
  • 22
  • 28