FBJS image slider

Question

Im trying to recreate a slider similar to:

http://www.facebook.com/BacardiLimon?v=app_146177448730789

but apparently there is zero documentation on how to do something like this with FBJS :'(

    var eCardPos = 0;
    var totalCards = 4;
    var animationFadeTime = 300;
    var cardUrls = [];
    cardUrls[0]= '';
        cardUrls[1]= '';
        cardUrls[2]= '';
        cardUrls[3]= '';

   function changeEcardPrev()
 {
eCardPos--;
if (eCardPos < 0) {
  eCardPos = totalCards-1;
}
showEcard();
 }
function changeEcardNext()
{
eCardPos++;
if (eCardPos > totalCards-1) {
  eCardPos = 0;
}
showEcard();
}

function changeEcard(pos)
{
eCardPos = pos;
showEcard();
}

function showEcard()
{
var elCard = document.getElementById('cardImage');
var elLink = document.getElementById('cardLink');
var elPreload = document.getElementById('preload_card_'+eCardPos);

for (var i=0;i<totalCards;i++)
{
  document.getElementById('cardButton_'+i).removeClassName('active');
}
document.getElementById('cardButton_'+eCardPos).addClassName('active');
elLink.setHref(cardUrls[eCardPos]);
Animation(elCard).to("opacity", 0).duration(animationFadeTime).checkpoint(1, function() {
  elCard.setSrc(elPreload.getSrc());
}).to("opacity", 1).duration(animationFadeTime).go();

 //Animation(elCard).to("opacity", 1).duration(animationFadeTime).go();
}

I happened to find the src but I dont even know where to start :\

EDIT:

I think I found something that might help but the images slide :\ I just want them to appear when a direction is pressed.

  var numslides = 3;
  var slidesvisible = 1;
  var currentslide = 0;
  var slidewidth = 300;

  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 < (numslides-slidesvisible-1)) { Animation(document.getElementById('left_button')).to('opacity', '1').go(); }
    currentslide++;
}
  }
  function goleft() {
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--;
}
  }

How would I get the image to fade in and out rather than slide?