enavu webdevmania tutsvalley psdestination
visit the enavu network
118 Comments Article Title Overlay Article Title

Making a jQuery infinite carousel with nice 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 [...]

DZoneDiggDesign FloatDeliciousBlinklistRedditFacebookGoogle BuzzTwitterStumbleUponTumblrShare

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 :)

DZoneDiggDesign FloatDeliciousBlinklistRedditFacebookGoogle BuzzTwitterStumbleUponTumblrShare

Related posts:

  1. Making an infinite JQuery carousel
  2. Making a nice jQuery content scroller with ease.
  3. Making a Cool Spotlight Effect with jQuery
  4. Making A Cool Thumbnail Effect With Zoom And Sliding Captions
  5. Cool navigation menu made with JQuery

Slobodan Kustrimovic

This author has yet to fill his BIO.

Did you absolutely LOVE this article... share it!

Comments

  • Nice work mate, thanks very much!!

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

  • 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?

  • 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.

  • 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?

  • @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? :)

  • 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?

  • 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 :)

  • 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 :)

  • 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.

  • 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?

  • 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. :)

  • 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 :)

  • thank you for the quick fix!

  • no problem, anytime :) Does it work ok?

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

    —>

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

  • 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 !

  • 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.

  • 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

  • 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

  • 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!

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

  • 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

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

  • 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.

  • 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

  • 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

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

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

  • 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.

  • Sure, send it over. :)

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

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

  • 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.

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

  • great :)

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

  • 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

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

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

    Thanks,
    Louise

  • Got it. :)

  • 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.

  • 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.

  • 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).

  • @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 ;)

  • 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

  • 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.

  • 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.

  • 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

  • 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

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

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

  • 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

  • @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.

  • 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!

  • No problem :)

  • 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!

  • @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 :)

  • 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 !!

  • 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!

  • @nico – Are you sure you coded it properly?

    @Zohera – Glad to help :)

  • 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 ?

  • 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 !

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

    Really Awesome one :)

  • 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.

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

  • 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

  • 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.

  • 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!!

  • 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

  • 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

  • @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).

  • 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?

  • 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.

  • @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. :)

  • 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 !

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

  • 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?

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

  • Don’t work with every browsers…

    http://sorgalla.com/jcarousel/

    This one does ;-)

  • 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.

  • 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

  • where can ı put js file link?

  • very nice tutorial, thanks.

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

  • Any updates on the vertical version?

  • Saved my life dude.
    Thanks a lot.

    Anyone tried adding a scrollTo(item) function ?

  • Like Oliver and HBR, I love this, but really need a “jump to” option – I’d like to have numbered boxes above the carousel to slide directly to the selected slide. Anyone have any ideas?

  • Hey, I really like that carousel. I have also already used it. :)

    But I’m having trouble using it twice at the same website, anyone can give me some tips?

    Regards,
    Silver

  • I’ve been trying to have a similar slider on my website. This will help. Thank you.

  • I was able to get this to work, but it jumps a little. see http://www.papergodmother.com/test/itempage.html.
    Its at the bottom of the page. When I click the scroll button, it scrolls, but it jumps. Its weird.

  • Thank you for tutorial but i found a bug: if you set auto_slide = 0 and hover_pause = 1, after the event mouseover is triggered, auto slide starts.
    To fix that, just verify again if the auto_slide == 1 in the second param-function of hover().

    if(hover_pause == 1){
    //when hovered over the list
    $(‘#carouselUl’).hover(function(){
    //stop the interval
    clearInterval(timer)
    },function(){
    //and when mouseout start it again
    if(auto_slide == 1)
    timer = setInterval(’slide(“right”)’, auto_slide_seconds);
    });

    }

  • Can anyone explain, what to change in order to allow the user to control it via drag instead of click?

    I thought of the following:
    Rather than clicking left, the user grabs the content, and slides it to the left. That would be nice! Possible?

  • Thanks for an excellent tutorial.

    I don’t use the auto-scroll feature, so is there a way of modify it to jump to the next 3 items in the same way as this http://www.adobe.com/products/dreamweaver/whatsnew/ (towards the bottom of the page)?

  • First let me say thanks for the script – works very well!

    Next, as a newbie to JQuery, I’m trying to modify and am having trouble wrapping my head around how to go about it.

    I’m currently using your script above, having only modified the ‘prev’ and ‘next’ placement. My goal is to have many transition options, including this script, that could be called on a flag. For example, if we wanted to change from the infinite carousel to a scrollDown, or fade, I could simply change the flag to indicate which effect was used while maintaining the ‘prev’/'next’ of the function slide(). Does that make sense?

    Any direction would be greatly appreciated.

  • Hello Greg,

    To point you in the right direction, you can create a couple of more functions like slide and have them enforce a different type of effect. Then add a few if statements where the slide function is called. I am not exactly sure what the best way to accomplish something like fadeIn but im sure you can figure something out.

  • Thanks for the quick response.

    I think the sticking-point is understanding the separation of functions.

    For example (from the script above):

    $(document).ready(function() {...

    evaluates the

    var auto_slide =1;
    var hover_pause = 1;
    var key-slide = 1;

    and makes the

    $('#carousel_ul li:first').before($('#carousel_ul_li:last'));

    infinitely slide based on the vars, and the [modified] slide function

    function slide()

    makes the next and previous button images work the slide manual.

    With all that said (and hopefully formatted for readability), I’m not seeing how to incorporate some of these options http://jquery.malsup.com/cycle/options.html

    Any help would be greatly appreciated.

    Regards

  • $comments ++
    In my continued reading, I’d like to take back what I just said, since I now see that the function slide() would be completely dependent on the $(document).ready(function() {...
    I will continue ready and see if I can figure this out, but will take any/all comments/suggestions along the way.

    thanks again.

  • Outstanding script! Quick question… I was wondering how I would be able to re-define the IDs of the “scroll_left” and “scroll_right” divs. I am trying to work this into a coda slider script and everything would work pretty much flawlessly if i could change the div IDs to something else. Let me know, Thanks!

  • You dont need to change the id’s :) its in the href href=’javascript:slide(“left”);” will slide left :P

  • Thanks for your quick response!

    Welp, when the link is contained in the “scroll_left” or “scroll_right” divs, it works fine. But when moved into the coda slider div where I need it, breakaroo.

    I figured maybe there was some magic in the code that wasn’t as apparent as the slide commands in the “carousel without nice features” that controls the left and right slide.

    Maybe when in the coda-slider div, it hops into that bit of JS and the command doesn’t register? I’m not all that great with weaving multiple scripts together… Any advice would be greatly appreciated.

    An alternative method, and probably the preferred method, would be using two carousels that use the same “left” and “right” buttons to control both carousels simultaneously. Is it possible to do this?

    Thanks again!

  • is it possible to have the slides fading from one to the other instead?
    Cheers
    Kev

  • Hello,
    When I resize the width of carousel inner to 850px, it will separate from left and right scroll, how can i fix this?

  • Pretty sure that’s a CSS issue :)

  • This Carousel is great! I have a client request to not have the carousel infinite, and have the first slide first, and last slide last. I’ve been playing with the javascript and am having no luck. I tried commenting out the “Move last item before first” code, but then it starts at the second image, and you have to scroll back for the first item.

    Thanks for the code and tutorial!

  • Problem fixed, was just a css setting in #carousel_ul

  • hi
    i want my carousesl show only 1 item of 400px width

    what should i do ?

  • Thank you, very much!
    I used it for my site

  • I am trying to use this for 4 items and it doesnt postion where i want it to. Is there a way to position this so eveything will fit on one line

  • I am very very new to jQuery and have been trying to find just this type of solution

    Thank you very very much!!

    The notes in the code are great for a novice like me to pick up some good lessons

    Thanks again!

  • thanks dude…gonna use this

  • we are currently creating this into a plugin with some awesome new features :) stay tuned!

  • This is a great tutorial!

    I was just wondering, is there a way to set the carrocel so that it would jump from the first group of images to the second group (basically, jump 3 images at a time)?

    Thanks

  • I think if you change this line:

    var left_indent = parseInt($(‘#carousel_ul’).css(‘left’)) + item_width;

    to

    var left_indent = parseInt($(‘#carousel_ul’).css(‘left’)) + (item_width * 4);

    it should do the trick

  • Thanks for the really nice tut… I used that on my new website design…. will show u soon…. (the web is offline now… lol :P )

    i took me at least 30 min to set all the things according to your css nd js requirements… but work perfect now…. and kinda on purpose.. love it..
    thanks again.. :)

    keep up good work…

  • Thank you for such an easy to follow tutorial.

    Like Hugo Froes has requested, i want to scroll a set of 3 or 4 items at a time. Tried your suggestion of changing:
    var left_indent = parseInt($(‘#carousel_ul’).css(‘left’)) + item_width;
    to
    var left_indent = parseInt($(‘#carousel_ul’).css(‘left’)) + (item_width * 4);

    This only animates the set of 4 – moving it left or right – but it stops on the 2nd item as it used to before making the change in the script.

    I’m not very familiar with javascript.. as you can tell :) Any help with this will be great!

  • Hi Boba,

    This is pretty much exactly what I need! Thing is though, is it doable to insert this script in a semi automatic carousel? It slides when you hover the mouse over either the left or right side of a set of photo’s (you can see it in the website) but my friend I’ve setup the site for, wants it automated. The existing script is jQuery as well, and I’ve tried to mix ‘em both together but to be brutally honest, I don’t really understand any of it :D It’s not that your tutorial isn’t clear but unfortunately I’m pretty much a newbie in jQuery… Might you be able to help me with this? Would be awesome!

  • Hey Erik,

    Unfortunately we don’t usually go out and write code for people unless its a bug or a super easy tweak. We however do have hourly rates for development :)

    I’d suggest you go through all our tutorials and get a grip on jQuery and code it yourself, not only will you learn a lot but you will be proud!

    Thanks,
    Angel

  • Hi Angel,

    Fair enough! I do want to learn this since it’s very usefull and it certainly will make me very proud to be able to do it myself :) I’ll try to figure out how to implement this in the existing script I got.
    If it doesn’t work out, I am of course willing to pay for the development, no problem at all!

    Thanks,

    Erik

  • Hi,

    I came upon this tutorial because I’m looking for a infinite carousel but without cloning. The reason is because the current carousel I’m using creates multiple GET requests of the .mp4 video file that I have on the carousel when the page loads. It also requests it every time when the carousel lands back on the video again.

    Does this carousel address multiple GET requests and can we add video to it?

    Many Thanks!

Leave your own!

Sponsors

freedcamp free project management

Popular Articles

fzilla file hosting