JavaScript Carousel
To be totally fair, Bill Scott defined the slide transition first. It was only then when I decided to whip up some actual JavaScript using YUI to make it happen. Being as it may, in return, Bill scott took to it and decided to spend a weekend beefing that up into something that made sense with his JavaScript Carousel Component which allows you to configure it in various ways for slide transitions, amount to show at a time, how fast to slide etc… as well as having it load statically, dynamically without Ajax, dynamically with Ajax, slideshows, and of course, it can degrade to even not having JavaScript at all.
With all that in mind, if anyone out there is looking for an awesome implementation of any kind of sliding pagination, I urge you to check out his examples and carousel API. It’s pretty awesome.
July 14th, 2006 at 7:03 am
Hi,
I’ve been working on this earlier. My version can be seen at http://www.seat.nl and http://www.vangoghmuseumshop.com
My soultion only needs about 7K of javascript.
Cheers,
Arjen
July 15th, 2006 at 1:44 am
Nice one Arjen; a little cleaner than the one I implemented for Nintendo a while back; both are circular though and Dustin’s and Bill’s are not.
Here’s the one I built, err… hacked together:
http://examples.chadlindstrom.ca/dhtml-shifter/
http://www.nintendo.com
Does yours do horizontal as well?
July 15th, 2006 at 3:16 am
another *Dutch* making (Hollandse makelij)
http://www.funda.nl/koop/
July 15th, 2006 at 3:40 am
http://examples.chadlindstrom.ca/dhtml-shifter/
in your js you sniff for gecho
var isGecko = (ua.match(’gecko’) != -1 );
Gecko is an animal I believe
July 15th, 2006 at 11:09 am
I’ve found the Nintendo example a little hard to follow. Eg. I don’t know where I end up in comparison to where I started.
July 17th, 2006 at 10:38 pm
Dustin,
Both yours and Bill Scott’s implementations are nice. Your site is also one my favorite web sites (in term of both contents and presentation) that I visit frequently and I list as such on my own web site (your tetris game is awesome). Anyway, I also had a need to develop a similar component about a month ago, but in my case, the requirement is such that I must use scirptaculous. Fast forward to a month later, I turned it into a Javascript library with hooks for customizations.
You can check out the demo at http://slidinggallery101.pragmaticobjects.org/
Kevin Hoang Le
http://pragmaticobjects.org
July 18th, 2006 at 7:53 am
[…] JavaScript Carousel (tags: yahoo javascript usability) […]
July 22nd, 2006 at 12:16 am
@Johan: yea, as I put it above; it was a bit of a hack given it was put together for a client in a short timeframe.
@Dustin: is it the code you can’t follow or the function of the carousel?
August 10th, 2006 at 1:35 pm
Thanks for publishing the link to this carousel script. I’ve been needing something like this, and dynamic drive dot com has some similar ones, but I liked the interface of this the best. Thanks for the tip ! :)
October 14th, 2006 at 3:12 am
Dustin, I really like your
http://www.thinkvitamin.com/misc/yui-demos/demo-04.html
very lightweight compared to Bills full featured component. What would be the best way to use it, when you have several sliders on one page. Could you give me a hint? thanks
October 14th, 2006 at 12:52 pm
@Chad, it took me just a few moments to understand what was really going on just visually. the code is all good :)
@Daniel, it might be best to use Bill’s in that case. Most of my prototypes were hacks written up out of sheer hackery and proof of concept.
May 24th, 2007 at 6:25 am
I’ve been trying to implement this for links only, no photos - a one row carousel for just links. I tried using the YUI component that has the images sliding horizontally, but it’s too image-centric for the job… the hack is more than ugly… it doesn’t work. Furthermore, the vertical text scrollers I’ve found are nearly impossible to turn horizontal. I’ve really been struggling, any suggestions? I’ve been trying to get a one row carousel for links only
September 15th, 2007 at 2:23 pm
Don’t you just hate a web site like this one… don’t click on the link
its one of those.. no back out of…. GARBAGE…
Oh yes…it take you some where else…..Bastards!
http://www.seat.nl and