jQuery Carousel

The items, which can be static HTML content or loaded with (or without) AJAX, can be scrolled back and forth (with or without animation). Several examples illustrate the possibilities of jCarousel. To use the jCarousel component, include the jQuery library, the jCarousel source file, the jCarousel core stylesheet file and a jCarousel skin stylesheet file inside the <head> tag of your HTML document. jCarousel automatically wraps the required HTML markup around the list.

JQuery Carousel demo

Changes to the code below will update the demo above in real time.



Oct. 25, 2007, 8:13 p.m. - Ferry Mulyono

Hi. I was wondering, if it's possible to create vertical carousel, but instead of single-column vertical carousel, I want to create carousel with like 4 x 2 items, and when I scroll up/down, it will display 8 new items (another 4 x 2). Could you shed some light please? Thx.

July 8, 2008, 3:31 a.m. - Jeff

Would it be possible to make the scroller continuous?

Aug. 8, 2008, 7:49 a.m. - Phil

Does anyone know of a way to display thumbnail images as the external controls, rather than image numbers?

Aug. 11, 2008, 2:45 p.m. - Vish007

this nice photo gallary

Aug. 22, 2008, 11:31 p.m. - Chandrashekhar

Its Great job done by you

Nov. 20, 2008, 2:14 a.m. - manish painuly

fabulus job ...

Jan. 20, 2009, 11:42 p.m. - apple

it id possible to insert a php code inside and link the image to other without any page change.

Feb. 23, 2009, 1:52 p.m. - Norah

Hi, It's a nice carousel. Works great! I have a question: How to make the carousel work if the external controls are on a different page?

March 6, 2009, 9:42 p.m. - Trendy Pixels

Thanks for this! Do you have any other variations available?

March 28, 2009, 5:56 a.m. - Jack

Thanks, it's a very good one. I'd like to know, is it possible to set a border to the selected item ???

April 24, 2009, 4:02 a.m. - Rodrigo de Almeida

Thanks indeed for the post! It helps a lot! I am loading the images from the database, but also, I'd like to insert texts under the images, is it possible? Best, R

June 7, 2009, 12:08 p.m. - Mohamed Zaki

Awesome work guys

June 17, 2009, 1:27 a.m. - Unmotivated Genius

could you show how to do with a slider also

July 17, 2009, 11:45 a.m. - ofo

button play and stop????

July 26, 2009, 3:13 a.m. - Mark

It's all nice, but one thing I can't find anywhere is the vertical carousel with two columns and mouse over scroll when you move your coursor over top or bottom edge of the vertical thumbnail area. Any idea how to do it?

Oct. 2, 2009, 4:34 p.m. - C A

How do you set the width and height of the box?

Oct. 9, 2009, 11:15 a.m. - chris mantilla

is it possible to add links to those pictures? if so, how?

Nov. 7, 2009, 4:03 p.m. - Jonathan

RE: Ferry Mulyono Conceptually, you could create a carousel in the same maner... a single carousel item would contain your 4x2 items.

Dec. 4, 2009, 4:42 a.m. - Phil

I got a problem with the animate / speed command. I can only adjust the time between (the pauze) the 'auto-play'. Would like to slow down the animation... Can anyone help me out? ph.wallage@gmail.com

Dec. 21, 2009, 6:44 a.m. - Jocuri Barbie

It work very nice.

Dec. 26, 2009, 12:05 p.m. - ooty

this is Nice, but i need it to move continues, if the image is finished it should start again.

Jan. 25, 2010, 10:50 a.m. - murtaza baig

I love ajaxdaddy because of his work..

Feb. 1, 2010, 9:46 p.m. - pradip

TOO GOOD but how can i use this js in asp .net for my project work PLEASE SEND ME MAIL AT pdu29@yahoo.com I NEED YoUR HELP

Feb. 3, 2010, 11:23 p.m. - swapnil bhosale

Thanks, its really simple & fast to implement.

Feb. 6, 2010, 3:56 p.m. - hesham

pleas how can i use this ? i tired frome search to how can i use ajax . pleas tell me and thx

Feb. 11, 2010, 12:34 p.m. - Jorge Cotillo

Hi there, im seeing that all images have the same height or width, but what about those images that have different width or height, well i got into this, and the the carousel looks awful an image inside another :S how can i solve this problem? any suggestion?

April 7, 2010, 9:05 a.m. - Frink

Hello, (sorry for my english) I want to create two carousel in my html page. when i try to install two carousel the thirst move with the second. I don't know how to separate the carousel. Anyone have a idea ? thank you

April 18, 2010, 9:54 p.m. - Princy

its too good for bigners

April 23, 2010, 2:55 a.m. - venkat

Nice article

May 5, 2010, 12:48 a.m. - suzie

Hi, I want like this jcarousel (next and Prev Buttons) plus that I want to scroll automatically one by one, any help

May 17, 2010, 11:40 a.m. - Lilly

Very nice article! I'm a beginner in scripts like this and I wonder wether this is possible with items and under the items short texts. Is it possible?

June 5, 2010, 5:21 a.m. - virendra singh

searching in a long list box up to

July 31, 2010, 6:38 a.m. - dalmeny web design

How do i customize this to make it display 1 at a time rather than 3? other than that, awesome solution, will be using on a project :) thanks!

Aug. 2, 2010, 11:13 a.m. - johnatan ivini

Molto buono ! Grazie !

Sept. 17, 2010, 7:33 p.m. - Erik

Nice tool!!!

Sept. 22, 2010, 9:18 a.m. - Frases divertidas

Muy buen aporte, ¬°gracias!

Sept. 23, 2010, 5:49 p.m. - James

Hello how to make the carousel slide automatically 3 frames at a time?

Sept. 27, 2010, 2:34 p.m. - Frink

Why the carousel is not compatible with safari ? thx

Oct. 12, 2010, 10:17 a.m. - joss

@Dalmeny Web Design: From what I can see, you just add a css rule to make the class "jcarousel-clip-horizontal" (which is the container for the visible area of the carousel) only as wide as a single element in your carousel. In the case of their examples, you need to edit the css that says: .jcarousel-skin-tango .jcarousel-clip-horizontal { height:75px; width:245px; } and change the width to only 75px (ie, one element), so it looks like this: .jcarousel-skin-tango .jcarousel-clip-horizontal { height:75px; width:75px; } Works for me.

Oct. 12, 2010, 5:19 p.m. - Slein

Quote: "How do i customize this to make it display 1 at a time rather than 3?" I have the same problem. The slider always jump from 1 to 3. :-(

Oct. 15, 2010, 7:29 a.m. - ping

It's all nice, but one affair I can't acquisition anywhere is the vertical carousel with two columns and abrasion over annal if you move your coursor over top or basal bend of the vertical thumbnail area. Any abstraction how to do it?

Oct. 24, 2010, 2 p.m. - Silly Bandz

Thanks, I think we'll implement this on our site

Oct. 31, 2010, 1:17 p.m. - RicoTelaran

Good Carousel

Nov. 15, 2010, 8:14 a.m. - Web Designer

nice tool. thank you.

Nov. 18, 2010, 4:36 a.m. - priya

very usefull site

Nov. 18, 2010, 4:39 a.m. - employee

need an example for thickbox and also need some js files to clear understanding

Nov. 23, 2010, 3:50 a.m. - PraP

Nice one!!! thankx.

Dec. 6, 2010, noon - sarathkrishna

wwowww super...thnkx

Dec. 10, 2010, 5:21 a.m. - Thiru

Nice example... with out mesh in code

Dec. 10, 2010, 8:14 p.m. - gtk2k

Nice article

Feb. 7, 2011, 7:18 a.m. - darshan

its amazing yar. I like this site because its more needfull.

Feb. 27, 2011, 5:45 p.m. - nandida

Nice script but i need makeup the carousel with some icons, rounded corners...

March 16, 2011, 7:26 a.m. - glen

This is great! Will it work pulling in the content areas via ajax too?

March 31, 2011, 5:49 p.m. - Ryan

i am wanting to change the numbers 1,2,3,4 in to names. is this possible? when i change it from the numbers to letters it stops working so how can i get it to work with names instead of numbers. thanks

April 17, 2011, 8:13 a.m. - zerit2002

How can I restart the carousel with different configuration properties?

April 21, 2011, 9:48 a.m. - Khushi

Good job. I did try it and modify some part to show some text under the image. But now the transition is not so smooth. It is moving in a chunks. Looking for the reason why the movement is not smooth. Any suggestion???? Thanks Khushi

May 9, 2011, 1:06 p.m. - Jakup

Thanks for the plugin.

June 20, 2011, 9:45 a.m. - Pierre-Louis Lefevre

Hi Kushi, I found a Flash carousel that let's you add text for each image and it moves really smooth. If you're still looking, try the 3D Carousel. It's free and the guys over there helped me install and customize it on my site very fast. Interested? http://www.flashxml.net/3d-carousel.html

Oct. 2, 2011, 12:07 p.m. - Faruq Shaik

Can you guide me how to change the image scroll to Fade... Like If i click on numbers 1,2,3... Image should be displayed with Fade effect rather than scrolling....

Oct. 20, 2011, 6:49 a.m. - Deon

Hi there, Im having a problem in DOTNETNUKE, I keep on getting an error with Jcarousel-clip, this works on all my other sites but not this one, any suggetions??

Jan. 6, 2012, 2:26 p.m. - Karan

Hey very cool carousel. Mabe you could add some guides to create this. Here's one step by step guide for Carousel with blink effect: http://conceptapplied.blogspot.com/2012/01/item1-item2-item3.html Thanks!

Oct. 30, 2012, 4:29 a.m. - huynhhieu

Thanks, but, how to set slide item up or down. please help me!

Dec. 22, 2012, 6:54 a.m. - agnes

will this work for adobe dreamweaver cs6? i copied the above codes into cs6 and previewed in IE but it shows everything aligned to the left and the pictures are listed down in point-form. help please. urgent for project submission.