Pluit Carousel - Prototype Carousel

MON, 8 MAR 2010

I was looking a Prototype based carousel, so I googled and found a couple. I was not very happy with what I found, so I decided to write my own version.

Carousel is definitely one the most widely used Javascript widgets, you probably need to use it to show your photos, product/feature highlights, top stories, page navigation and etc. It comes in different look and feel, but I found that they all still fall into Carousel gene.

The idea is you should be able to use the same semantically structured HTML and Javascript initialization codes, and apply different skins (CSS styling) to create different look and feels of a carousel.

It should really easy to use just like Lightbox JS, throw in the HTML tags and Javascript, and it should just work. The default skin should simple yet look good; so it can be used out of the box for many different sites, while the skins should be re-usable. And that’s what I was trying to achieve with Pluit Carousel.

Click here to download and for the demo page.

Hope you’ll find it useful for your project as much as I do.

Javascript

19 Comments . Comments Feed . Trackback URI

Wed, 11 Aug 10 12:15 am . Marcelo wrote:

Great work, congratulations!

However, I’m trying to use Ajax to replace the carrossel with another one depending on the user’s choice in a drop down (the user selects a category and then I get the items from the database and replace the HTML with the new carrossel data) but the carrossel doesn’t work.

Do I have to somehow run the initialize js command again?

Thanks again.

Marcelo.

Wed, 11 Aug 10 09:59 pm . Herryanto Siatono wrote:

Np Marcelo,

Yeah you would most likely have to re-initialize the carousel.

Unless the elements do not get replaced (as in you just update the href and the image src), and total no of elements are the same, you wouldn’t need to.

Mon, 4 Oct 10 04:41 pm . bolo wrote:

hello. great script, but i have a little problem. on IE 7 script not showing first slide… if i click manualy or run autoplay, first slide appear when second is activate… any idea what can be wrong?

Mon, 4 Oct 10 05:26 pm . ever wrote:

great work! thx

Thu, 10 Mar 11 11:48 am . Tom wrote:

Hi there. Pluit Carousel is fantastic and what I was hoping to find (a good prototype skinnable carousel). However I am having a difficultly initializing it inside of lightview (http://www.nickstakenburg.com/projects/lightview/). I have it working on a page just fine but can’t seem to get it working otherwise. Any tips you can share? Also I am trying to use init similar to the commented out section on your carousel page (new Pluit.Carousel.init(’classNameHere’). I would prefer to be able to call it based on an id instead of a class. Can I do something like new Pluit.Carousel.init($(’idHere’))?

Fri, 11 Mar 11 12:04 am . Herryanto Siatono wrote:

@Tom, if you want to show it inside lightview, you gotta make sure that when on lightview show, you’ll need to re-initialize Pluit.Carousel, because when the elements are not displayed, the calculation for the sliding would be messed up.

Yes you can initialize by id through new Puit.Carousel(’dom_id_name’);

Sat, 12 Mar 11 03:55 am . Carlos wrote:

I really like this script. I also have the same issue as bolo. It isn;t working right with IE 7 and 8.
Must be a CSS thing

Anyone can help?

thanks

Sat, 12 Mar 11 03:44 am . Carlos wrote:

I looked at the CSS. I thought this was odd:
.pluit-carousel .viewport {
width: 1px;

I changed it to the size of my viewport (ie images) and it seems to work now in IE

Sat, 12 Mar 11 01:33 pm . Herryanto Siatono wrote:

@Carlos if you are not seeing it on IE probably because the carousel has not been initialized. The viewport width is supposed to be set by javascript.

I’ve removed it from CSS for easier debugging and setup.

Thu, 24 Mar 11 10:48 pm . Greg wrote:

Is it possible to get some more complex examples on the page that use the Options? I have the library installed and the base carocel works but when I try to use a different id/class or if I try to add on different options the script doesn’t function. I know this is an error with how I am calling it from Javascript so if I could see some examples using a different class name, initializing multiple instances, and using options like turning off default nav it would be very helpful. Otherwise, incredibly useful!

Fri, 25 Mar 11 10:10 am . Herryanto Siatono wrote:

@Greg note that when using id, the div attribute to be changed to ‘id’ instead of class. Noted on more examples, will apply it on the next patch. Thanks!

Fri, 15 Apr 11 10:33 pm . Galeel wrote:

It would be great if you add visibleSlides function to set the number of slides to be visible on the viewport.
Scenario: If the UL contains 15 LI elements(can be dynamic) and
I want to show 4 LI at a time without changing the HTML such that having nested LI’s (your first example)

Tue, 14 Jun 11 02:03 pm . James wrote:

I’m trying to initialize 2 different Carousels on a page but with different settings. I just can’t seem to figure out the correct way to do it. This is what I am using now:

new Pluit.Carousel(’#pluit-carousel2′, {
circular: true,
autoPlay: true,
slideDuration: 8
});
new Pluit.Carousel(’#gs-content-box1′, {
circular: false
});

I can confirm that if I just use the default initializer that uses the same settings for both it works just fine.

Tue, 14 Jun 11 04:42 pm . Herryanto Siatono wrote:

@James Remove the hash sign for the ID name.

new Pluit.Carousel(’pluit-carousel2′, {
circular: true,
autoPlay: true,
slideDuration: 8
});
new Pluit.Carousel(’gs-content-box1′, {
circular: false
});

Sat, 25 Jun 11 05:05 am . Ted P wrote:

I set up Pluit.Carousel in a blank html page and it worked fine. Now I am trying to add it to an ASPX page and it acts like the javascript files are not initializing. Is there some secret to this. I have tried everything I know (my knowledge is limited).
Thank you.

Sat, 25 Jun 11 05:51 am . Ted P wrote:

Here is the html file: http://www.outdoorrustics.com/carousel-test.htm
Here is aspx file:
http://www.outdoorrustics.com/default1.aspx

Sun, 26 Jun 11 04:08 am . Ted P wrote:

It now works sort of. I had to change the to , but it has changed the way the page displays. Ouch. Any ideas?

Sun, 26 Jun 11 04:06 am . Ted P wrote:

My last post didn’t display command line I changed..DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN

Sun, 4 Sep 11 10:31 am . Dakshika wrote:

Great work, is there any option to stop autoplay on mouse over particular image..??

Pluit Carousel - Prototype Carousel

Add Your Comment