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

Making an infinite JQuery carousel

In this tutorial we will make an infinite JQuery carousel. I noticed that most of tutorials on how to make an infinite JQuery carousel are quite complex, so i decided to show you how to make it much simpler.

DZoneDiggDesign FloatDeliciousBlinklistRedditFacebookGoogle BuzzTwitterStumbleUponTumblrShare

How will it work?

We will use an unordered list for our carousel items, which will be placed inside a div with overflow:hidden css property so all items beyond limits of the div will be hidden.
The infinite effect will be made by changing position of the items, when the user clicks right(next) the first item will be placed after the last item and when he clicks left(previous) the last item will be placed before the first item.
There are many ways to make this effect but i choosed this one, because i think it’s the easiest to understand.

Demo Source

HTML

carousel_1

<div id='carousel_container'>
  <div id='left_scroll'><img src='left.png' /></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'><img src='right.png' /></div>
</div>

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{
/*styling*/
cursor: pointer;
cursor: hand;
}

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.

carousel_3

That’s how it looks. Everything is perfect.Now, the JQuery part…

JQuery

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

        //when user clicks the image for sliding right
        $('#right_scroll img').click(function(){

            //get the width of the items ( i like making the jquery part dynamic, so if you change the width in the css you won't have o change it here too ) '
            var item_width = $('#carousel_ul li').outerWidth() + 10;

            //calculate the new left indent of the unordered list
            var left_indent = parseInt($('#carousel_ul').css('left')) - item_width;

            //make the sliding effect using jquery's anumate function '
            $('#carousel_ul').animate({'left' : left_indent},{queue:false, duration:500},function(){

                //get the first list item and put it after the last list item (that's how the infinite effects is made) '
                $('#carousel_ul li:last').after($('#carousel_ul li:first'));

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

        //when user clicks the image for sliding left
        $('#left_scroll img').click(function(){

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

            /* same as for sliding right except that it's current left indent + the item width (for the sliding right it's - item_width) */
            var left_indent = parseInt($('#carousel_ul').css('left')) + item_width;

            $('#carousel_ul').animate({'left' : left_indent},{queue:false, duration:500},function(){

            /* when sliding to left we are moving the last item before the first item */
            $('#carousel_ul li:first').before($('#carousel_ul li:last'));

            /* and again, when we make that change we are setting the left indent of our unordered list to the default -210px */
            $('#carousel_ul').css({'left' : '-210px'});
            });

        });
  });

That’s it. I think it’s very easy to understand how it works.

Related posts:

  1. Making a jQuery infinite carousel with nice features
  2. Making a Cool Spotlight Effect with jQuery
  3. Making A Cool Thumbnail Effect With Zoom And Sliding Captions
  4. Cool navigation menu made with JQuery
  5. Making Image Overlay Caption Using CSS

Slobodan Kustrimovic

This author has yet to fill his BIO.

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

Comments

  • I would like to see a feature added to make it auto-scroll. I have found 2 tuts now on infinite carousels, but none with automated features. That would be a great feature to have.

  • That’s not a problem at all. Needs some restructuring in the jquery to avoid duplicate code sections but will be done. Check back in few hours.

    Thanks for the idea :)

  • Sweet. Very nice. Thank you.
    p.s. you spelled Fourth wrong.

  • I’m happy you like it :)

    p.s. Ooops you’re right :) Sorry about that.

  • Nice, what browsers did you test it in?

  • Tested in IE8, Firefox3, Google Chrome and Safari.

    Why, found a bug?

  • Your tutorial should make this to plugin with some option in it and how to call the plugin with the user option. Good work!! :D

  • :) Thanks, will probably do it soon.

    Thanks for the idea.

  • I made a jQuery Inifinite Carousel plugin, few month ago : http://code.google.com/p/jquery-infinite-carousel/.

    @casey auto-scroll is available as well

  • Nice plugin sroucheray. I will make this one into a plugin soon. :)

  • Thank you for this. I actually like using short bits of code that are specialized for that one application than loading a plugin that’s meant to do all kinds of things.

    Anyhow, I didn’t get your code working when I copy-pasted from your site. My layout requires only one image and the “next/prev” buttons show the next/previous image.
    So I tried the code from your source code in the RAR and it finally works :)
    No I Idea where the difference is … but it works.

    Thanks, mate!

  • Yea and plugins sometimes don’t offer exactly what you want.

    Hmmm. Did it give a javascript error or…? Maybe i made a mistake when copy pasted the code inside the tutorial, i’ll check it out.

    Don’t mention it :) Glad to be helpful.

  • Don’t know, I had to do some editing to get it to work inside a WordPress template (replacing $ with $j, for instance) and Safari browser is awfully quiet when it comes to JS errors.
    “Don’t confuse the user, just ignore it … I’m a mac” :)

  • Checked out the coding and couldn’t find the problem.

    Haha :)

  • I’m gonna try it. Thanks.

  • It works great. Thank you very much.

  • Glad you like it. :)

  • Nice tutorial, thanks!

  • Love the jquery tuts, thank you for sharing!

    /subscribed

  • Thanks for the kind words everyone :)

    If you wish to see some specific tutorial you can use the contact form to tell me what you want, and i’ll get to it asap.

  • Great work, i like it.

    Is it possible to add an event, that lets the gallery scroll from mouseover to mouseout?

    Can the code be changed to let three tiles scroll by a single click?

    Thank you.

  • Hey i like this alot, was wondering if there was any chance to put cases in for key strokes, ie instead of moving it using the mouse have the left and right keys doing the scrolling instead.

  • Since this tutorial was quite a successful one i decided to rewrite it and make it better so all the new things you requested can be added to it. I expect the new tutorial on jquery infinite carousel to be up by Monday.

    @NetruN – mouseover and mouseout scrolling will be available in that new tutorial, and the scroll more tiles should also be available.

    @Jason – Yes, that will also be available in the new tutorial.

  • Hi thanks for sharing this!

    I am having a problem with mine just scrolling into infinity and never looping. It might be because I am trying something weird and putting a bunch of links and images within one really wide list element. Any ideas on how I broke it ?

  • nevermind… I found your update of this and it works great! Thanks again :)

  • :) I’m glad you like it zac

  • Great stuff my friend! thanks a lot! Great & useful tut!

  • the css need change, any bug in IE6.

    #carousel_inner { /* add below */
    position:relative;
    }

    #carousel_ul {/* add below */
    overflow:hidden;
    }

    Do you agree?

  • Hi, great article!! Can you test my code and share some comments? I´ll keep your name as reference but with my hand coded lines ;)
    http://snipt.org/pLj

    -

    I´m now coding a version with autoplay(setInterval and clearInterval) also another version b(beta) but it turned into a plugin.

    -

    I´m waiting your e-amail.

    sorry for my bad english

    -

    regards

    Kroska

  • I am very new to jquery and have a question. I am trying to use this in my portfolio site–for each project I use the carousel to scroll through the pages in that particular project. Some of the projects have several images, while others may have only 2. It works beautifully for projects with 3+ images, but if there are only 2 images it blinks when I scroll right (scrolling left works fine). How come? I’ve figured out a hack fix–repeating the 2 images so it scrolls 1,2,1,2–but I’d love to see if I can adapt the code to work properly. Anyone?

    –Susan

  • Hi Susan,

    There is a newer version of this tutorial.

    http://tutsvalley.com/tutorials/making-a-jquery-infinite-carousel-with-nice-features

    It’s coded better and have some features like autoscrolling, keyboard scrolling… but unfortunately the same issue remains. I made a comment on how to fix it there. Here is the link:

    http://tutsvalley.com/tutorials/making-a-jquery-infinite-carousel-with-nice-features/comment-page-1/#comment-206

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

    n

  • btw…. thanks for the tut… very easy to follow and to understand…. cheers!!! Steve

  • Great tut– is there a way to start the carousel on a different list item depending on the page (based on a page ID, let’s say) ?

  • It’s very good.
    I like this.
    Thanks for share.
    And I wrote something to introduce this project for my readers.
    You can find the post about this in my website.
    If something is wrong,pls figure it out.thanks.

  • Thanks :)

  • very nice !, I added a link from my page http://www.ajaxshake.com
    thanks

  • thank you very much.you’are really smart.thanx a lot.

  • Thank you so much! Great works!!!

  • I know this will sound silly…but…is there a way to set a automatic slider to NOT slide when a visitor comes to the page? And only start sliding when they click the arrow to see another image? Thanks! Izobella

  • Hi. Very nice tutorial !!!
    I have a question: I want to put more 3 carousel in one page. But the other 2 don’t work. Only the first one.

    What can i do to all work independent??

  • Is there a simple way to make this carousel non-infinite? I’ve styled mine to be a timeline of events, and am trying to make it only go from start to end. As it sits, you can scroll left past the first item and it just keeps going infinitely into nothing.

    Thanks!

  • What would cause the elements to not duplicate themselves? right now I have it set up, it steps through the items correctly but once the items run out, its just blank, the items don’t duplicate/move themselves.

  • Fab Tut. Love this, it is working wonderfully, just curious if there is an IE issue??

    TTFN

  • Thank you! Very beautiful work

  • Thank u for ur tutorials

  • Its good to learn Thanks!

  • thank you so much, nice slide show, it works :)

  • Nice tutorial, thank you so much, good luck guys ;)

  • Really gr8 wrk man…gr8 idea…bt having a problem in ie7….

  • Thank you for the code … it still works perfectly in my website

Leave your own!

Sponsors

freedcamp free project management

Popular Articles

fzilla file hosting