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.

Download code Visit demo

Tags: carousel

<< jQuery Autocomplete Ajax Feed >>

JQuery Carousel demo

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
<base href="http://www.ajaxdaddy.com/media/demos/play/1/jquery-carousel/jcarousel/" />

<title>jCarousel Examples</title>
<link href="style.css" rel="stylesheet" type="text/css" />

/**
 * Additional styles for the controls.
 */
.jcarousel-control {
    margin-bottom: 10px;
    text-align: center;
}

.jcarousel-control a {
    font-size: 75%;
    text-decoration: none;
    padding: 0 5px;
    margin: 0 0 5px 0;
    border: 1px solid #fff;
    color: #eee;
    background-color: #4088b8;
    font-weight: bold;
}

.jcarousel-control a:focus,
.jcarousel-control a:active {
    outline: none;
}

.jcarousel-scroll {
    margin-top: 10px;
    text-align: center;
}

.jcarousel-scroll form {
    margin: 0;
    padding: 0;
}

.jcarousel-scroll select {
    font-size: 75%;
}

#mycarousel-next,
#mycarousel-prev {
    cursor: pointer;
    margin-bottom: -10px;
    text-decoration: underline;
    font-size: 11px;
}

</style>

</head>
<body>

<div id="wrap">
  <h1>jCarousel</h1>
  <h2>Riding carousels with jQuery</h2>

<h3>Carousel with external controls</h3>
  <p>
    This carousel shows how to control it from outside.
  </p>

<div class="jcarousel-scroll">
      <form action="">
        <a href="#" id="mycarousel-prev">&laquo; Prev</a>
        <select>
          <option value="1">Scroll 1 item per click</option>
          <option value="2">Scroll 2 items per click</option>
          <option value="3">Scroll 3 items per click</option>
          <option value="4">Scroll 4 items per click</option>
          <option value="5">Scroll 5 items per click</option>
        </select>
        <a href="#" id="mycarousel-next">Next &raquo;</a>
      </form>
    </div>

</div>

</div>
<script type="text/javascript">
/**
 * We use the initCallback callback
 * to assign functionality to the controls
 */
function mycarousel_initCallback(carousel) {
    jQuery('.jcarousel-control a').bind('click', function() {
        carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
        return false;
    });

jQuery('.jcarousel-scroll select').bind('change', function() {
        carousel.options.scroll = jQuery.jcarousel.intval(this.options[this.selectedIndex].value);
        return false;
    });

jQuery('#mycarousel-next').bind('click', function() {
        carousel.next();
        return false;
    });

jQuery('#mycarousel-prev').bind('click', function() {
        carousel.prev();
        return false;
    });
};

// Ride the carousel...
jQuery(document).ready(function() {
    jQuery("#mycarousel").jcarousel({
        scroll: 1,
        initCallback: mycarousel_initCallback,
        // This tells jCarousel NOT to autobuild prev/next buttons
        buttonNextHTML: null,
        buttonPrevHTML: null
    });
});

</script>
</body>
</html>

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.