Tuesday, September 5th, 2006

Prototype Carousel Widget

Category: Prototype, UI

<>p>Sebastien Gruhier has written a Prototype version of the YUI Carousel component.

This version is lightweight and has a few parameters compared to the more flexible YUI version (that comes with a 200kb price tag).

Prototype Carousel

Related Content:

Posted by Dion Almaer at 5:14 pm
16 Comments

+++--
3.9 rating from 59 votes

16 Comments »

Comments feed TrackBack URI

I was just looking for one of these yesterday, but I ended up just making my own since there wasn’t one already made.

Good find :)

Comment by Philip Plante — September 5, 2006

Sebastien is doing great work, window.js is also a nice tool.

Comment by Hubris Sonic — September 5, 2006

I still find the left-right convention in these carousels unintuitive, seems like they should work the opposite way.

Comment by Michael Mahemoff — September 5, 2006

I also have the same thoughts regarding the arrows’ directions.

Comment by Kevin Hoang Le — September 6, 2006

Prototype? Why don’t you mention the jQuery solution?

See it here: http://sorgalla.com/pages/jcarousel.html

Comment by Dominik Hahn — September 6, 2006

[...] Carousel Widget A carousel widget for displaying scrollable lists of images. (tags: javascript widget webdev) [...]

Pingback by Jim O’Halloran’s Weblog » Blog Archive » links for 2006-09-06 — September 6, 2006

Actually, this is a common misunderstanding about the Yahoo! User Interface Library. The full un-minified, fully commented version of the library is 200K. I chose to use this version with my carousel code for simplified debugging.

Here is the actual sizes to what the carousel requires:
yahoo-min.js : 1K
event-min.js – 9K
container_core-min.js – 34K
connection-min.js – 9K
dom-min.js – 12K
animation-min.js – 15K
total : 80K

Comment by Bill Scott — September 6, 2006

I apologize about this misunderstanding and I have removed it from the homepage (Dion Almaer could you remove it please)

My goal was mainly to have a carousel based on prototype for rails applications and that works on a lot of browser. jCarousel for example does not work on Safari.

And now I can add easily some features I need (available soon:))

Comment by seb — September 7, 2006

Thanx for the rewrite Sebastien Gruhier :)
I though found a little bug in the _nextScroll function
I needed to change:
if (this.currentIndex + this.options.numVisible + this.options.scrollInc

Comment by Ronni Rasmussen — September 7, 2006

oh it skipped the codes :S
but just remove the “+ this.options.scrollInc” from that line
Though i dont know how it will effect non static content in the slide!

Comment by Ronni Rasmussen — September 7, 2006

good job I was needed just from prototype implementation of carousel.

Comment by BY — September 7, 2006

_onComplete seems strange, it scrolls to the end after the Ajax update. Shouldn’t it be:

this._scroll(-this.options.scrollInc, inc == this.options.scrollInc);

instead of

this._scroll(-inc, inc != this.options.scrollInc);

Comment by choonkeat — September 20, 2006

[...] a las 0:43 y está archivada en: Scripts, Javascript. Puedes dejar un comentario, o enviar un trackback desde tusitio. [...]

Pingback by Webmaster Libre » Archivo del weblog » Prototype Carousel Class — October 2, 2006

No autoplay?

Comment by Dave — March 1, 2007

Oh it’s very cool!

Comment by Ferran Riera Bosch — April 20, 2007

The newer Prototype UI is simply amazing – it is so much easier to get things done without even touching jQuery manually. I love it!.

For anyone that’s a fan of the Apple.com style carousel widget, you can now download a free version I made from http://www.blarnee.com/idisplay

Enjoy ;)

Comment by legacye — June 16, 2008

Leave a comment

You must be logged in to post a comment.