This code snippet shows you how to make a sexy image carousel, including left/right arrow opacity fade and mouseover highlights, using FBJS. This code will work for Static FBML page tabs, FBML application tabs and FBML Facebook applications.

The end result will look something like this:

View it in action! Click Here!

Start with Style

First, let’s set some style elements. This looks a lot longer and more complicated than it actually is. You could easily make it more compact by putting more attributes on one line. I’ve got them broken out for clarity and readability. We start by establishing some CSS to control the float, width and visibility of the slideshow wrapper, the slide images, and the arrows.

#slideshow_wrapper { 
width:530px; 
clear: both; 
margin-bottom: 20px; 
}

#slideshow { 
overflow: hidden; 
width: 435px; 
float: left; 
position:relative; 
margin-right: 5px; 
}

#slideshow_inner { 
position: relative; 
width: 1250px; 
}

#slideshow_inner a {
opacity:0.7; 
margin: 0 7px; 
}

#slideshow_inner a:hover { 
opacity: 1; 
}
	
/* right and left arrows */
.navarrows {
padding-top: 25px;
float: left; 
display: block; 
width: 32px; 
padding-top: 35px; 
cursor: pointer; 

The FBJS

Now for the FBJS script. Notice the first set of vars at the very beginning. These vars come into play when determining how your slideshow should behave. Should clicking on the arrows advance the slideshow by one image? Or one screen of images (for example, three at a time, if you have three thumbnails visible)? This is where you decide that.

Think of “slides” here as “screens”. currentslide should generally always be 0.

If you want an arrow click to advance the slideshow only one image at a time, then numslides should be the actual number of slides you have, slidesvisible should be the number you want to be displayed onscreen (three in my example image above), and slidewidth should be the width of your image plus any padding you need to account for.

If you want an arrow click to advance the slideshow one whole screen at a time, meaning all visible slides will be hidden and the next set of slides will slide out, then numslides should be the number of total “screens” you’ll have.

If you have 12 images, and you’re displaying 4 images per click, your numslides will be three, since 12/4=3. In this case, slidesvisible should always be one, and slidewidth should be the total width of your screen (so with 4 images per screen, you’d add up the width of each image, plug padding, and multiply by four).

I know it sounds confusing – play around with it a little bit or just read through the code below and you’ll start to understand how it works.

// set some slider vars
var numslides = 7;
var slidesvisible = 3;
var currentslide = 0;
var slidewidth = 147;

function goright() {
	if (currentslide <= (numslides-slidesvisible-1)) {
		Animation(document.getElementById('slideshow_inner')).by('right', slidewidth+'px').by('left', '-'+slidewidth+'px').go();
		if (currentslide == (numslides-slidesvisible-1)) {
			Animation(document.getElementById('right_button')).to('opacity', '0.3').go();
			Animation(document.getElementById('left_button')).to('opacity', '1').go();
		} 
		if (currentslide  0) {
		Animation(document.getElementById('slideshow_inner')).by('left', slidewidth+'px').by('right', '-'+slidewidth+'px').go();
		if (currentslide == 1) {
			Animation(document.getElementById('left_button')).to('opacity', '0.3').go();
			Animation(document.getElementById('right_button')).to('opacity', '1').go();
		}
		if (currentslide > 1) { Animation(document.getElementById('right_button')).to('opacity', '1').go(); }
		currentslide--;
	}
}

And finally, the HTML

And here’s how we implement it:

<div id="slideshow_wrapper">
<img id="left_button" class="navarrows" src="http://www.snipeapps.com/images/arrow-sketch-left.png" />
<div id="slideshow">
	<div id="slideshow_inner">
		<a id="slide1" href="http://www.snipe.net" title="Snipe.Net"><img src="http://www.snipe.net/wp-content/uploads/2009/10/thumb-1.jpg" /></a> 
		<a id="slide2" href="http://www.spiffydns.net" title="SpiffyDNS"><img src="http://www.snipe.net/wp-content/uploads/2009/10/thumb-2.jpg" /></a> 
		<a id="slide3" href="http://fbmhell.com" title="FBMHell"><img src="http://www.snipe.net/wp-content/uploads/2009/10/thumb-3.jpg" /></a> 
		<a id="slide4" href="http://www.crankyhaiku.com" title="Cranky Haiku"><img src="http://www.snipe.net/wp-content/uploads/2009/10/thumb-1.jpg" /></a> 
		<a id="slide5" href="http://www.geekhaiku.com" title="Geek Haiku"><img src="http://www.snipe.net/wp-content/uploads/2009/10/thumb-2.jpg" /></a> 
		<a id="slide6" href="http://socialmediadouchebag.net" title="Social Media Douchebag"><img src="http://www.snipe.net/wp-content/uploads/2009/10/thumb-3.jpg" /></a> 
		<a id="slide7" href="http://tehawesome.net" title="Teh Awesome"><img src="http://www.snipe.net/wp-content/uploads/2009/10/thumb-1.jpg" /></a> 
	</div>
</div>
<img id="right_button" class="navarrows" src="http://www.snipeapps.com/images/arrow-sketch-right.png" />
			
</div>
<br style="clear: both" />

That’s it. Obviously, you’ll need to replace my images and links with your own, but I’ve used this on big campaigns and it’s worked out great.

Also note that by adding a little additional HTML/CSS, you can have each image appear with links above or below it as well. You just need to create container divs around the link+image code and use CSS to style and float them accordingly, like:

<div id="slideblock1" style="width: 84px;float: left;padding: 4px;text-align: center">
<a id="slide1" href="http://somelink.com" style="text-decoration: none;color: white">
<img src="http://www.yoursite.com/images/vidslugs-1.jpg" id="vidthumb"/>
<br />time to collect</a>
</div>

Next up, I’ll show you how to use this code to create a “hero box” style display, where clicking on one of the images in the carousel doesn’t link out to a different place, but instead changes the content of a larger image on the same page.

Advertisement

468x60_makemoney

Advertisement

Themeforest
Previous post

Clear Default Form Input Value on Click Using FBJS

fbml-share
Next post

CSS for Custom Share Button in FBML

snipe

snipe

I’m a tech geek/dev/infosec-nerd/scuba diver/blacksmith/sword-fighter/crime fighter/ENTP/warcrafter/activist. I'm the CTO at Mass Mosaic and the CEO of Grokability, Inc. in San Diego, CA. Tweet at me @snipeyhead or read more...

  • hey!
    Great work!
    Just a quick note:
    Why is #slideshow_wrapper 530px wide? isn't Facebook going to reduce size of static FBML canavas to 520px any time soon?

  • Also when I scroll from the beginning to the end couple times your demo http://www.facebook.com/snipe.net?v=app_2374463
    pictuers start to dissapear 🙂 I don't know whether it is a bug on my side or not?

  • They've been saying that for quite some time now. You would need to adjust the width based on your own images anyway (would need to be some equal equivalent of (thumbsize+padding) * num thumbs visible, otherwise you'd end up with some images partly cut off since the math doesn't work out.

  • I'm not able to reproduce that at all – what browser are you using? (I did modify this script from working code, so there is a minute chance that I forgot to tweak a setting or CSS style to match the this example.)

  • Alf

    The live sample at FB snipe.net does not work for me in IE8. I see two rows of photos, 5 in the first row and 2 in the second row with a Left arrow above both rows & Right arrow below both rows. ?? On the min-sites, the style buttons do not render for me in IE8 and revert to basic text links.

  • I'll look into it. I tested it in IE7 and IE8 and it worked fine, but that was the original code, not the tut version, so I may have forgotten to tweak something.

  • it's not as far as it might seem 🙂
    http://developers.facebook.com/blog/post/399

  • Rg

    Hey Snipe, been following this site since day 1. LOL you must love the pumpkins, anyways, thanks for the info regarding the hosting

  • Guest

    Any luck in fixing the IE7/8 issue with the 2 rows yet?

  • It appears to be a known Facebook bug with both linked and in-page stylesheets”
    http://bugs.developers.facebook.net/show_bug.cgi?id=9601

    Not much I can do about it, being that it’s a Facebook bug.

    • Ronchuke

      Right, you can put the style in a different file (e.g style.css) and link to that file – it solved the problem for me.

  • Any chance of getting a vertical version of one of these? I love the horizontal, but the vertical fits better with our new layout!

  • OH, and thank you! This is fantastic! =)

  • noypiscripter

    Can the script be easily tweaked to make the carousel rotate infinitely and not have disabled state for arrows?

  • I don’t know that this script could be modified for that too easily, but I know what you’re talking about can be done.

  • Jeff

    I’m noticing that there is a growing space after the second push. If you try it with larger images, it’s really pronounced. If it is continuing to grow each time, that might account for the images starting to be hidden by the overflow at a certain point. Seeing it in Chrome, will test it other ways.

  • Jeff

    even stranger, if you embed the whole thing into a larger div, spacing issues start to get REAL strange..here’s my attempt to play with this info…http://www.facebook.com/pages/Big-Fat-Testbed/137583756276409?v=app_7146470109&ref=ts
    When the carousel is by itself, at least the first two line up, embedded into more of a “page” (as straight copied nested divs that were working) the spacing goes all awry. FB isn’t allowing a negative margin, which fixes it in chrome/FF. Another oddball is it doesn’t recognize some of the css I did to the arrows to spread them and drop the text between….oh FB fun! lol

  • Jeff

    ahh..forgot one thing on the cycling..if you do not wait for the image to slide fully and click again, the set moves off the frames very quickly. I think that’s what Ndive was doing, and likely a pile of other users would do!

  • That’s really confusing, but I’ll try. Nice post.

  • eiron

    I’ve narrowed it down to 520px and it works in IE8 and firefox and chrome if facebook is in english (ltr)

    it doesn’t work as well when facebook is in rtl (for the hebrew)
    I thought of forcing ltr in the css
    any other ideas?

    check it out:
    http://www.facebook.com/pages/yrwn-ptrwnwt-yntrnt-hkmym/109376102452002?v=app_10531514314

    • Anonymous

      I’ve tried linking to an external style sheet for IE, but the scrollbar is still not working (i.e. just coming up as thumbnails).

      I’m not sure exactly how the code is supposed to go in the stylesheet with the .navarrows section since it looks different than the others in the example (i.e. it doesn’t start with an ” # ” like the other but a ” . ” instead, and it doesn’t seem to have a closing ” } ”

      Ugh, what am I doing wrong!! I have made this work like a charm in everything except IE. What I have done though is made it to where videos will pop up above instead of images (i.e. the Twilight example on Snipe’s site).

      Any help would be greatly appreciated!!

  • Andres

    Its simple to fix in ie, you just have to call the style sheet in. I had so much trouble with this if anyone need help email me through the contact page on my site andresfgarcia.com I would be happy to share my code.

    • Anonymous

      I’ve tried linking to an external style sheet for IE, but the scrollbar is still not working (i.e. just coming up as thumbnails).

      I’m not sure exactly how the code is supposed to go in the stylesheet with the .navarrows section since it looks different than the others in the example (i.e. it doesn’t start with an ” # ” like the other but a ” . ” instead, and it doesn’t seem to have a closing ” } ”

      Ugh, what am I doing wrong!! I have made this work like a charm in everything except IE. What I have done though is made it to where videos will pop up above instead of images (i.e. the Twilight example on Snipe’s site).

      Any help would be greatly appreciated!!

  • Mukashh

    i have put everything as it is on my page but its not working any suggestion as to why?

  • Mukashh

    I have copied the code as it and placed it on fbml but the slide show doesnot work any suggestion?

    • I’m guessing you have a misplaced div somewhere – the code does work.

  • Jim

    Hello!

    I’ve followed your facebook tutorials and they have always been extremely helpful! But I can’t seem to find a demo for an example you have.

    On your facebook you have an example named “Gallery Demo” ( http://www.facebook.com/snipe.net?v=app_10339498918#!/snipe.net?v=app_11007063052 ) and I was wondering if you have the demo here or on snipe.net.

    thanks!

  • Jim

    actually scratch that, its just clicktoshow clicktohide lol

    • Hehe – yep./. That’s the point the article on snipe.net was trying to make – the functionality *seems* limited, but if you get creative, you can do all kinds of stuff with it. 🙂

  • MariaK

    Hello snipe and thank you for you help, i was loking for something like this to simulate a jquey carrousel in fbml, i found it and implemented for a client´s page, here is the Fb address http://www.facebook.com/maria.kovacs1?v=app_147604698607839#!/hokohokocom?v=app_147604698607839 , the difference was the direction of the slider i did it vertically i ´ll be back soon with the code to share with all of you .
    great job and thanks

    • Great, looking forward to it 🙂

    • Anonymous

      Hi Maria, how did you do your vertical carousel??

  • remmie

    Great slider! I have one issue and have been struggling with it for 4 hours now.
    I have 10 images. Want to show image after image. Images are 424 in width.
    My settings now:
    // set some slider vars
    var numslides = 10;
    var slidesvisible = 1;
    var currentslide = 0;
    var slidewidth = 424;

    It shows all images under each other. What am I doing wrong?

    The page: http://www.facebook.com/pages/West-Covina-CA/e-remmiecom/295927294205?v=app_11007063052

    Hope somebody can help me!

    • What’s your CSS look like?

      • andrew

        Snipe,
        Thank you so much for all of the helpful tutorials and insights. You have helped me tremendously as I have begun the learning process for FBML and FBJS. Currently I am trying to create a slider along the same lines as “Remmie’s” comment above. I only want 1 image to display at a time, and I have approximately seven images. When I change the “slidevisible” variable it still shows all three. Do I have to also change something in the CSS or JS or HTML. I followed the link to remmie’s slider and that is essentially the exact functionality I am seeking. Sorry, I am new to FBJS and it seems to be a bit over me head. Any way you could help? Thanks!

  • Hi Snipe, very good work with the carousel. Thank you for posting this. My only issue with it is I have added my image links and the images themselves are larger than the ones in your tutorial, what ends up happening is: I have about 8 images and it seems that they don’t all fit next to each other in the wrapper, so I end up having two rows of images. The slider will scroll left and right with the images stacked. I would like to have ten or 12 images in there and be able to scroll left and right. Is there a fix for this? I actually just added height to the #slideshow and it cropped the second row, now all I need is the fix to make them all fit side by side. Any help would be greatly appreciated. Thanks!!!

  • irtiza104

    Hi,

    Thanks for this article. But can you please tell me if its possible to have a vertical carousel instead of a horizontal one? How can i do it?

    Thank you.

  • Anonymous

    This one is Good, but is it possible to have a vertical version of it??? Some suggestions??

  • cwy98345

    Very appreciated for your tutorial, you make my day !

    Since we are learn how to create the carousel which link to another link, so is it possible when we click on the thumbnail then making a enlarge pic or playing a video? that is more interesting.

    but how to do ? i still playing those code

  • Pingback: Facebook FBJS Examples | FBMHell.Com()

  • Dan

    Is it possible to have the images loop so there is no end to the carousel?

  • Steve_54897

    hi
    doesn’t work … !
    nexr

    • Except it does. If you’re unable to get it to work, that’s one thing, however the code does in fact work. You’re welcome to be more specific and we can try to help you, but the code does function as expected.

  • P Toulze

    Excellent, Thanks 1000 time work perfect.
    can’t wait for the Larger image.

  • P Toulze

    This is workin perfectly ! Thanks
    http://www.facebook.com/pages/Graf-Marketing-Web/111148038941804

    Quote: “Next up, I’ll show you how to use this code to create a “hero box” style display, where clicking on one of the images in the carousel doesn’t link out to a different place, but instead changes the content of a larger image on the same page.”

    I can’t wait….

    I’m trying to add a live broadcast (podcast) in there…. I probably go wit Nicecast, but so far i’m not to sure how to proceed, Any ideas?

  • Crossbones1080

    Thanks!

    I’ve successfully gotten the carousel to work the way i want, however I’m trying to make multiple carousels in the same tab. I thought it would be as simple as copying and pasting the html & script and renaming the slideshow , inner, wrapper, and the left/right btns. But so far I have two slideshows and only one set of left/right buttons work at a time. Is there something in the script i am missing? email crossbones1080@yahoo and i’ll send you the fbml if u need to look at it.

  • I’ve had no issues. You sure it’s not busted in some other way?

  • aldo

    Where should I add the script if there’s no tags here? Should I paste all the script in an external .js file?

  • jonnie

    this was extremely helpful. now i’ve just got to remember to swap out your images with mine so i have the bucket of awesome dripping pure awesomeness all over my facebook page.

    thanks for your post.

    • Hah – glad it helped 🙂

  • john

    I’ve copied the code and replaced the images with mine but the arrow on right isn’t working, I mean clicking on it doesn’t show the next image. First I thought I was missing some codes but copying your entire code without replacing anything produces the same result: clicking on the arrow on the right doesn’t show the next image.

    • john

      ok..it’s working

  • Anonymous

    Snipe, thanks a lot for the code! You made life a lot easier for me. I need to include an image carousel that instead of showing just one row with three thumbnails, shows two rows with two thumbnails. Can you help me with some tips? Thanks!

  • Ast_int

    this coding is not compatible with ie did any body check with ie?

  • Is there an error in the script? An error is showing up in dreamweaver and i can’t get the images to slide. Check it here: https://www.facebook.com/pages/College-Radio/104606779571960?sk=app_4949752878

    • No error, but this is FBJS, not standard javascript, so Dreamweaver likely cannot parse it.

  • It look very nice on my site, but when i click the button the move to the next slide it doesn’t move. Look at this link: https://www.facebook.com/CollegeRadioJa?sk=app_4949752878#

    • This article is over a year old. You should be using javascript and iframe tabs now, not FBML. FBML is being deprecated and will not work moving forward.

      • So, do you know why it is not moving? Do you know what the problem could be?