Making a jQuery infinite carousel with nice features

Due to high interest in the first tutorial on jQuery infinite carousel and a lot of suggestions from you all, i decided to take it a step further by improving the code a bit, and add some features.

Demo Source

First of all, some of the stuff you mentioned in the comments, they are great, thank you for that, but they can’t exactly be bult in into this type of carousel so in near future i will code a different jQuery carousel and implement the features you wanted.

If you saw the first tutorial you will notice that the HTML and CSS are almost the same, only the jQuery coding changed in a bigger scale.

HTML

carousel_1

<div id='carousel_container'>
  <div id='left_scroll'><a href='javascript:slide("left");'><img src='left.png' /></a></div>
    <div id='carousel_inner'>
        <ul id='carousel_ul'>
            <li><a href='#'><img src='item1.png' /></a></li>
            <li><a href='#'><img src='item2.png' /></a></li>
            <li><a href='#'><img src='item3.png' /></a></li>
            <li><a href='#'><img src='item4.png' /></a></li>
            <li><a href='#'><img src='item5.png' /></a></li>

        </ul>
    </div>
  <div id='right_scroll'><a href='javascript:slide("right");'><img src='right.png' /></a></div>
  <input type='hidden' id='hidden_auto_slide_seconds' value=0 />
</div>

I think only one of these properties needs to be explained further. The left margin of our unordered list is -210px. That’s because the last item will be moved before the first item, so we are setting the left margin to a negative number of the item’s width.

CSS


#carousel_inner {
float:left; /* important for inline positioning */
width:630px; /* important (this width = width of list item(including margin) * items shown */
overflow: hidden;  /* important (hide the items outside the div) */
/* non-important styling bellow */
background: #F0F0F0;
}

#carousel_ul {
position:relative;
left:-210px; /* important (this should be negative number of list items width(including margin) */
list-style-type: none; /* removing the default styling for unordered list items */
margin: 0px;
padding: 0px;
width:9999px; /* important */
/* non-important styling bellow */
padding-bottom:10px;
}

#carousel_ul li{
float: left; /* important for inline positioning of the list items */
width:200px;  /* fixed width, important */
/* just styling bellow*/
padding:0px;
height:110px;
background: #000000;
margin-top:10px;
margin-bottom:10px;
margin-left:5px;
margin-right:5px;
}

#carousel_ul li img {
.margin-bottom:-4px; /* IE is making a 4px gap bellow an image inside of an anchor (<a href...>) so this is to fix that */
/* styling */
cursor:pointer;
cursor: hand;
border:0px;
}
#left_scroll, #right_scroll{
float:left;
height:130px;
width:15px;
background: #C0C0C0;
}
#left_scroll img, #right_scroll img{
border:0; /* remove the default border of linked image */
/*styling*/
cursor: pointer;
cursor: hand;

}

carousel_3

Now, the main part…

JQuery


  $(document).ready(function() {

        //options( 1 - ON , 0 - OFF)
        var auto_slide = 1;
            var hover_pause = 1;
        var key_slide = 1;

        //speed of auto slide(
        var auto_slide_seconds = 5000;
        /* IMPORTANT: i know the variable is called ...seconds but it's
        in milliseconds ( multiplied with 1000) '*/

        /*move the last list item before the first item. The purpose of this is
        if the user clicks to slide left he will be able to see the last item.*/
        $('#carousel_ul li:first').before($('#carousel_ul li:last')); 

        //check if auto sliding is enabled
        if(auto_slide == 1){
            /*set the interval (loop) to call function slide with option 'right'
            and set the interval time to the variable we declared previously */
            var timer = setInterval('slide("right")', auto_slide_seconds); 

            /*and change the value of our hidden field that hold info about
            the interval, setting it to the number of milliseconds we declared previously*/
            $('#hidden_auto_slide_seconds').val(auto_slide_seconds);
        }

        //check if hover pause is enabled
        if(hover_pause == 1){
            //when hovered over the list
            $('#carousel_ul').hover(function(){
                //stop the interval
                clearInterval(timer)
            },function(){
                //and when mouseout start it again
                timer = setInterval('slide("right")', auto_slide_seconds);
            });

        }

        //check if key sliding is enabled
        if(key_slide == 1){

            //binding keypress function
            $(document).bind('keypress', function(e) {
                //keyCode for left arrow is 37 and for right it's 39 '
                if(e.keyCode==37){
                        //initialize the slide to left function
                        slide('left');
                }else if(e.keyCode==39){
                        //initialize the slide to right function
                        slide('right');
                }
            });

        }

  });

//FUNCTIONS BELLOW

//slide function
function slide(where){

            //get the item width
            var item_width = $('#carousel_ul li').outerWidth() + 10;

            /* using a if statement and the where variable check
            we will check where the user wants to slide (left or right)*/
            if(where == 'left'){
                //...calculating the new left indent of the unordered list (ul) for left sliding
                var left_indent = parseInt($('#carousel_ul').css('left')) + item_width;
            }else{
                //...calculating the new left indent of the unordered list (ul) for right sliding
                var left_indent = parseInt($('#carousel_ul').css('left')) - item_width;

            }

            //make the sliding effect using jQuery's animate function... '
            $('#carousel_ul:not(:animated)').animate({'left' : left_indent},500,function(){    

                /* when the animation finishes use the if statement again, and make an ilussion
                of infinity by changing place of last or first item*/
                if(where == 'left'){
                    //...and if it slided to left we put the last item before the first item
                    $('#carousel_ul li:first').before($('#carousel_ul li:last'));
                }else{
                    //...and if it slided to right we put the first item after the last item
                    $('#carousel_ul li:last').after($('#carousel_ul li:first'));
                }

                //...and then just get back the default left indent
                $('#carousel_ul').css({'left' : '-210px'});
            });

}

Final words

That’s it, hope you like this revisit and upgrade of the first jquery infinite carousel, and if you wish some more stuff to be implemented now it should be easy to make it into this coding, so say what you want :)

Follow TutsValley on Twitter, or subscribe to the TutsValley RSS feed if you want :).

Check out my other blog, WpCanyon for WordPress tutorials, tips, tricks and many more.

85 Responses

Jason

Sep 15th, 09

Nice work mate, thanks very much!!

Boba

Sep 15th, 09

:) I’m happy you like it, the key stroke sliding you mentioned is implemented. If you want more features just say :)

Sep 16th, 09

Awesome. Right when I thought “hey, that cool carousel jason whipped up sure could use an auto-feature for this next thing I’m doing” I notice you did just that.

My CC is maxed out, right now, but if this makes me some money I’d like to donate some … where’s the donate button?

Sep 16th, 09

oh, somehow the keyboard-control does not work on my mac with leopard 10.5 and safari 4. Not an issue for me, just thought I’d mention it.

Sep 16th, 09

Any idea how to get it to work with only two images too?
Right now it’ll work properly only if there are 3 or more list items.

I have no problem capturing a page that only has one image (I’m using WordPress as a CMS), in that case I just display the image without the scroll-thingie, obviously. But when someone uploads 2 images I guess it should carousel with just 2, no?

Boba

Sep 16th, 09

@mores – hehe, i’m glad it came in the right moment :) about the donate button, i don’t have it :) PayPal doesn’t support my country, and i think that 99% of the visitors don’t use moneybookers so didn’t make the donate button. Instead of a donation tell a friend about tutsvalley. :)

Don’t have a mac but will test it with safari.

BTW Who is Jason? :)

Boba

Sep 16th, 09

Yea, that was a problem for a while now. The fact that it works only with 3+ items. But i figured if there are less items there won’t be a need for the carousel.

But, as i said in the tutorial, if you want something to be done i’ll do my best to do it. There is a new article coming tomorrow and on Friday or Saturday you can expect this article to be updated. I’m also thinking about making it more jQueryfied, like only the UL is needed and the rest is done by jquery(the wrappers, divs…), what do you think?

Boba

Sep 16th, 09

A temporary solution is:

if($(‘#carousel_ul li’).size()>2){
//the jquery coding from the tutorial
}

so it would activate the carousel only if there are more then 2 items.

But that’s just temporary, and didn’t test it :)

Sep 16th, 09

Oops … sorry, “Jason” just popped into my head, I think it was one of the last commenters of the previous versions. Sorry, Boba.

I’ll put a link to this page in the source code, maybe you should put that into the code somewhere too … jQuery is visible to anyone looking at the page’s source code.

As to the jQueryfield thing, I have no idea what that means :p
Since I use a CMS all the time, it really doesn’t matter for me as it’ll be auto-generated anyhow. But if the end result is fewer lines of code, then by all means, try it. I am a sucker for beautiful and optimized code, haha :)

Boba

Sep 16th, 09

Hehe, it’s ok :)

No need, every one is free to use it as they want, but placing the link inside the code is very welcome :)

About the jQueryfied, what i meant with that is that the html won’t be that big, it will be just

list items

and the rest of the HTML will be generated with jQuery. :) I also plan to make this into a plugin later.

Sep 20th, 09

Fyi: the carousel does not work with 2 images when the images slide to the right. I changed this
var timer = setInterval(’slide(“right”)’, auto_slide_seconds)
to
var timer = setInterval(’slide(“left”)’, auto_slide_seconds)
and it works beautifully. Strange, no?

Boba

Sep 20th, 09

jQuery line 15th.

$(‘#carousel_ul li:first’).before($(‘#carousel_ul li:last’));

The last image is moved before the first one so sliding left works normally, but with sliding right, there is a problem because of that same line, because the last image is no longer there.

I will update it tomorrow so it works with less then 3 images :)

Didn’t work on it yet, but will probably make it like this:

if(number_of_images < 3){
duplicate all of them(like 1,2 -> 1,2,1,2)
}

Should work like that. :)

Boba

Sep 20th, 09

if($(‘#carousel_ul li’).size() < 3){
$(‘#carousel_ul li’).clone().insertAfter(‘#carousel_ul li:last’);
}

Put that right after the $(document).ready(function(){ ….

That is a temporary fix if you have less then 3 items.

If someone wants to see this tutorial taken a bit further by implementing dynamic number of items shown depending on the width of the carousel, just say so in the comments :)

Sep 22nd, 09

thank you for the quick fix!

Boba

Sep 22nd, 09

no problem, anytime :) Does it work ok?

Pandamo

Sep 23rd, 09

var item_width = $(‘#carousel_ul li’).outerWidth() + 10;

—>

var item_width = $(‘#carousel_ul li’).outerWidth(true) ;

dlv

Sep 27th, 09

excellent! i love it, really easy and powerfull!
Pause on hover is great also autosliding, and the option to on/off this features.

There is no comment in both tutorials asking to implement this in vertical layout…
Is it just easy like changing left/right to top/bottom and widht/height to height/widht values ??

Thanks in advance, thanks for sahre this kind of jquery resources as wll !

Boba

Sep 27th, 09

I’m glad you like it.

I haven’t thought about making this verticaly, but i think it will work with few changes, width -> height, left -> top, right-> bottom as you said + some css changes. I’ll see what i can do about it these days.

dlv

Sep 27th, 09

thanks for your answer Boba, this or next week i’m goint to start building a website and i’ll try to do this carousel vertically. If i have luck i’m goint to leave here my experience doing that

Lynn Eades

Sep 30th, 09

We are looking to use this on our redesigned home page. Right now it is in beta and not available outside the library. We are seeing problems in IE 6 and IE 8. The only items we changed in the javascript and style sheets are the size of the image and in the javascript the time interval for the autoscroll. Otherwise, the code is the same.

In IE 6: The pictures are breaking up. You will see parts of one image over top of the next image. This happens regardless of manual or automatic scroll.

In IE 8: The images will not scroll at all. Not manually or automatically.

Has anyone else had these problems? I would appreciate any ideas you might have for fixes.

Thanks!

Lynn

Lynn Eades

Sep 30th, 09

I did get the IE 6 problem fixed. It had to do with the width of the images not being the same as what I had in the HTML code. It is now working fine.

The IE 8 problem remains.

Thanks for any help you can give!

Boba

Sep 30th, 09

I would like to help you out, but can’t do much without seeing the problem myself or having the source code.

Lynn Eades

Sep 30th, 09

Hi Boba!

I have put it up in our preview area:

http://unchsl1.depts.unc.edu/preview/beta/index.cfm

Which source code do you need from me?

Thanks!

Lynn

Boba

Sep 30th, 09

That’s all i need, will notify you as soon as i have the fix.

Boba

Sep 30th, 09

You said it’s not scrolling in IE8, right?

I just tested it and works perfect. Maybe you disabled javascript in IE8. Can you ask someone else to try it out.

Lynn Eades

Sep 30th, 09

The person who has IE 8 in our suite has tried it several times with no luck. She could not get the demo on this site to work either. I will check with her again to try it out.

Thanks! I really appreciate you time and help!

Lynn

Lynn Eades

Sep 30th, 09

I just had someone else try it in IE 8 and it is working. Sorry to bother you! This is a great program and I am so thankful for you putting this together!

Thanks again!

Lynn

Boba

Sep 30th, 09

:) No worries. Glad to know it is working correctly.

Don’t mention it, i’m glad to be helpful.

Jeannie

Oct 7th, 09

I am having trouble trying to figure out how to use this. I already have a template however, I want it to autoscroll (without having to click left or right) once the page loads. I have tried several formats and inserted in several locations but none of the formats are working. It’s obvious that it’s me not doing it right but would ask for your assistance. I can email you my whole template.

Boba

Oct 7th, 09

Sure, send it over. :)

miho

Oct 7th, 09

This is great, has every features I wanted,
Thank you very much!!

One question.
Is it possible to have multi carousels on one page?

Boba

Oct 7th, 09

Glad you like it :)

Well, it is possible, but you will have to change the function names and IDs and CLASSes for multiple carousels because at the moment it works with a specific carousel. That will be changed soon, planned to make a plugin out of this, so it will be possible and you will be able to make multiple carousel easily.

miho

Oct 7th, 09

I did what you said,
“change the function names and IDs and CLASSes”
and I made it, thank you again soooo very much!!

Boba

Oct 7th, 09

great :)

This week pagination plugin should go live, and next week should be for carousel plugin.

Louise

Oct 8th, 09

Boba,

I have this working on a test site – looks great in Firefox and works fine on a Mac. On a Windows Vista machine with IE7 – I am seeing an issue with the carousel_ul width 9999px showing ALL images making the screen horribly wide…all I want to show is 3 slides at a time.

Have you seen this issue? I could provide you the URL, if you’d take a look at it. I would really appreciate it!!

Louise

Boba

Oct 8th, 09

Sure, send the link and i will see what can i do :)

Louise

Oct 8th, 09

Boba, I sent details through contact form….as site is not live.

Thanks,
Louise

Boba

Oct 8th, 09

Got it. :)

John

Oct 10th, 09

Boba, I think I am seeing the same problem as Louise. Looks fine in firefox but with IE8 all the images show instead of just 4.
Also, I set autoslide to 0 but it still autoslides.
Thanks for any help.

Boba

Oct 10th, 09

Add position:relative to carousel_inner. That will fix it.

The autoslide shouldn’t be problem. Contact me on email (use the contact page) and we will fix it.

Peder Johnsen

Oct 28th, 09

Hey!

I am using your great script on a website for a friend of mine:
http://www.pixelgeddon.com/v3/

But there is a problem!
When there are less than 4 images in the scroller it shows the first again at the end (with the fix to make it scroll “properly” to the right when there are less than 6 images).

I tried your fix:
if($(’#carousel_ul li’).size()>2){
//the jquery coding from the tutorial
}

But then the first image dissapears.. (hidden on the left of the second image).

Jared

Nov 2nd, 09

@Boba

IE is making a 4px gap bellow an image inside of an anchor (<a>) so this is to fix that

It exist a better solution!
Switch the doctype to XHTML 1.0 Strict and add a “display:block” to the img tag in your css! the 4px gab is history ;)

Boba

Nov 17th, 09

Sorry Jared, your comment ended up in the spam (Akismet’s fault :)).

Yea i know about the 4px gap, it was a pain in the a** (don’t know if i can say that word) when i first encountered it few years ago but i always used .margin-bottom:-4px (at least it think so) to fix it :)

Good to know about that way to fix it :) Thanks

noski

Nov 20th, 09

Hi, thanks for the great tutorial. I was wondering if there is a way to make the images turn up randomly in the carousel? I have a list of logos going from a to z but I’d like them to turn up randomly on each load, if that’s possible that would be awesome thanks.

pThomas

Nov 26th, 09

Thanks for the nice tutorial. I’m new to jQuery and all the great info and tutorials on the net make learning it mucho easier and saves me the cost (and trees) of buying a book.

Xander

Nov 27th, 09

Hey, this plugin looks great! Thanks for so far.

I have a question, is it possible to put a carousel in a carousel? So you can scroll in a list item as wel. I want to fill the lists with more code then images.

Kind regards,

Xander

Andrew (js_nuuuuub)

Dec 7th, 09

Awesome, this will help alot, this is really nice.

As a total noob question, how do i set to display more than 3 items, lets say 5 in the viewable area of the Carousel.

Is this purely by adjusting the css, ya know making sure the container is large enough to contain 5 elements per your instructions? or will js need to be adjusted too?

Thanks!
Andrew

zac

Jan 10th, 10

hi again :) I was wondering how one could go about adding easing effects to the carousel ?

Melatti

Jan 14th, 10

I set autoslide to 0 but it still autoslides, so I figured out that you need set hover_pause to 0 to stop it

Andy

Jan 15th, 10

Hi,

this tutorial is great, thanks for the great job.

I have applied it to a new website I’m building: I have tweaked your code so that the images are not IMG in the anchor links, but are the background of the list elements. That way I could have a rollover effect through CSS. I also added a jQuery effect that let me show a modal window with a full size version of the image by clicking on the slide.

I ended up with the same problem as the comment from Louise and John back in october: IE 6 and 7 would show all of the images. So I applied the fix you suggested (position:relative to #carousel_inner) and the LI backgrounds disappeared, although that fixed the IE problem. Any idea why that happened?

You can see the page (still in test stage) at
http://chiropracticdubai.com/test/index.php

Thanks a lot

Boba

Jan 15th, 10

@Andy – That’s strange. Try placing “!important” on the background-image in the css ( background-image: url(…) !important ), and let me know if it works.

Andy

Jan 15th, 10

How stupid am I? I messed up the path to the background-image….. :(

Now it’s working. Sorry for wasting your time and keep up the good work!

Boba

Jan 15th, 10

No problem :)

Paul

Jan 15th, 10

Hi Boba,
Thanks so much for this tutorial. I used it and have made a few amendments for my version. I wanted to have the layout more flexible so that the carousel’s dimensions were automatically set accoridng to the size of my images.

I did this by using jQuery to read the outerWidth and outerHeight and setting the CSS in the appropriate places. I also used the same technique to have a repeating background for the Left and Right scrollers with just an arrow overlayed.

It works very well but I’d never have got close were it not for you fantastic script.

If you (or any others) would like to see the mods I made, let me know and I’ll put them up.

Thanks again!

Boba

Jan 15th, 10

@Paul – Glad to help :) I am always happy to see how people used my tutorials/scripts so put them up and leave the links in the comments.

I have built another carousel and the tutorial should be up on Monday or Tuesday. This one is adjusting itself automatically, both from the image size and i think that i made it do something pretty cool, when window is resized it will automatically adjust itself to the new width, haven’t seen any other jQuery carousel tutorial or plugin do that.

So, keep tuned :)

nico

Jan 18th, 10

I have an error in IE7 and IE8 : (when I click on next or prev link)
Invalid Argument in jquery (v1.4) line 141 char 6

please help !!

Zohera

Jan 19th, 10

I tried using several jquery codes to achieve auto scrolling and left to right motion for my slider but none of them worked .But i was able to achieve the above functionality using your code.Thanks for such a good script .Really superb.
Keep up the good work!

Boba

Jan 19th, 10

@nico – Are you sure you coded it properly?

@Zohera – Glad to help :)

nico

Jan 19th, 10

my js is a “copy/paste” of yours.
I made a custom html/css not really different of yours

the error is in these lines :

a.elem.style[a.prop]=(a.prop===”width”||a.prop===”height”?Math.max(0,a.now):a.now)+a.unit;

Do you know what it mean ?

nico

Jan 19th, 10

problem solved !!
the left property in css for #carousel_ul is really important…
hum hum…

I add it my css code and it works !

Thanks ! Your carousel is very nice !

Zohera

Jan 20th, 10

even iam a newbie in js ..your code was so clear and understanding .

Really Awesome one :)

Goodluck

Jan 22nd, 10

Hi
Please help.I am a newbie and probably a bit thick skulled. I copied your HTML, CSS and Javascript code into Dreamweaver and saved the three files in one folder.When I open the browser I can see the outer carousel container. I can also see the inner carousel ( Three Black Rectangles) and the grey sections which I assume are the left_scroll and right_scroll. That is about all.Please Help. How do I get the carousel to move? Where are the pictures that are supposed to move?
Like I said I am a RAW NEWBIE. Where do I put the .js script?. How do I call the script so that it makes the carousel to work? Please help.

Boba

Jan 22nd, 10

@Goodluck – You can download the source code here http://tutsvalley.com/files/carousel_revisited.rar

Goodluck

Jan 23rd, 10

Boba
You are great man! You are awesome!! I downloaded the source code and put my own images and lo and behold the carousel really worked. Now please help me once more. My pictures are all very large. How can I reduce them? Because I am a newbie I would crave your indulgence to please give me some tips.
Once again Thanks Boba
Goodluck

Boba

Jan 23rd, 10

Well the easiest way would be CSS.

Find this part in the CSS:

#carousel_ul li img {
…
}

and at the end of it add the width and height like this

#carousel_ul li img{
…
width:150px;
height:150px;
}

Change the 150px to whatever you want. Let me know if you made it.

Zach

Jan 23rd, 10

Hi There! Boba, you are an excellent tutor for us JQuery learners! A thousand thanks!

Everything works perfectly and is very understandable, but I have a question: do you think you could guide me in enabling a ‘jump to’ function for this carousel?

I would like to have the ability that, when the user clicks one of the visible items in spots 2, 3, 4… of the carousel, that that clicked image slides to become the first item in the viewer. Any small bit of knowledge I would be very appreciative.

I am sorry for my English if I am not very understandable, I am also learning that….

Anyways, thank you so much for all of your help already!!

Goodluck

Jan 25th, 10

Boba
Thanks very much man. I tried the code you gave me and it worked. You are awesome. I have another question…..Would it be possible to put this infinite carousel on a Drupal Website?
If so what would I have to do to put it on a Drupal website? I ask this question because from what you have just taught me the jQuery Script goes into the section of the webpage. I dont know how to access and get to the section of a Drupal site.
Once again thanks
Goodluck

Goodluck

Jan 25th, 10

Hi Boba
Would it be possible to increase the size of the left.png and right.png so that I could put larger pictures on the site? If yes how can I do it?
All the best
Goodluck

Boba

Jan 25th, 10

@Goodluck – I haven’t worked with drupal yet so dunno how exactly it works :(

About the increasing the arrows just change the current arrow images with bigger ones and change the width and height values in the CSS for #right_arrow and #left_arrow (or remove those 2 CSS rules, i don’t remember why i declared them, should work without them normally).

Goodluck

Jan 26th, 10

Thanks Boba. I will do that.By the way is there a way I can add captions to each of the photos? I have seen one of your tutorials “Making Image Captions With jQuery” Is it possible to put the captions on the images? In your tutorial you trigger the captions on hover. Suppose I want the captions all the time. In other words the captions load and scroll left and right with the images?

DjebbZ

Jan 26th, 10

Hi !

Great jQuery, but I have a problem with it. I’m trying to create an auto-sliding infinite carousel with a total of 5 items, with only 4 displayed at the same time, so it’s [total-items - 1] displayed. But whatever I try, I realize that your carousel is made for [total-items - 2] displayed. You got me ? So what’s happening with me is that the at the very beginning the 1st slide operation is going ok, since it will slide 1 item right, but then only 3 items are displayed during all next slidings, and the fourth only “pops” at the end of each sliding.
Other explanation :
I think we should have this sequence :
|1234|5 => 1|2345| => |2345|1 => 2|3451| => |3451|2
but what i have is :
|1234|5 => 1|2345| => 12|345| => 2|3451| => 23|451| => 3|4512|

Any advice ? Everything I try – modifying the left css property of #carousel_ul, modifying the order and/or position of $(li:last).after($li:first) calls in code – doesn’t produce the expected results.

Boba

Jan 26th, 10

@DjebbZ – This is a pretty old tutorial, a new and improved carousel tutorial is planned to go up during this week and i think it will be much easier to achieve what you want with it. :)

DjebbZ

Jan 26th, 10

Ok ! So I guess I’ll have to wait until the new version is out or fight with it to get it work ! Either way is fine for me :)
Thanks for answering so fast !

Boba

Jan 26th, 10

@GoodLuck – Sorry i didn’t see your comment somehow. Gonna write a tutorial tomorrow on CSS captions (without the fadeIn, fadeOut, scroll…).

Andy

Jan 27th, 10

Hi Boba,

is it vital for the script that the images are all the same width, or can it be tweaked so that it can figure out how much to slide based on each images’s width?

Boba

Jan 27th, 10

@Andy – Yup, it’s vital. They should all be same width. A carousel that could be able to do that would be pretty complex.

Lanfeust

Feb 16th, 10

Don’t work with every browsers…

http://sorgalla.com/jcarousel/

This one does ;-)

Krish

Feb 17th, 10

Hi Boba,

It’s nice code. I’ve implemented it in my one of the site successfully. Now I want a carousel which should stop on mouse hover and not start again on mouse out, it should start only on page refresh or when mouse moves to left or right of the carousel. Also when the user mouses over the left side of the carousel continue to move the carousel “forward” to the right. When the user mouses over the right side of the carousel, move the carousel “backward” to the left. The carousel should move at the same speed as it does when the screen refreshes and it moves on its own. When the user moves the mouse off the carousel, the carousel should stop wherever it is.

Oliver

Feb 19th, 10

This such a good carousel!! Thanks so much.

1 question, someone had previously asked about a “jump to” feature, but the code was not published online. Could you let me know how this could be accomplished? I mean if I had a list of numbers I could click one and jump to that element in the carousel.

Thanks for the amazing carousel !!

Ollie

Msnabi

Feb 24th, 10

where can ı put js file link?

bicky

Mar 1st, 10

very nice tutorial, thanks.

how do i display more than 3 images, like 4/5 images in the view.

daulex

Mar 10th, 10

I didn’t like the inline js, so I dumped it and added these lines to the js:
$(“#left_scroll a”).click(function(){ slide(“left”); return false; });
$(“#right_scroll a”).click(function(){ slide(“right”); return false; });

And pointed the anchors to # :)

markus

Mar 12th, 10

hi there!
i just started in working with jquery…I’d like to know if there is a solution to making something scroll smoothly without the pauses between the changes in items?!

thanks for any help :)

great work