Adding controls to full width jQuery Carousel

Question

I've been collaborating with a coworker to develop a full width jQuery content carousel with some success - so far, we've managed to get the panels to display and animate as intended.

However if there are more than 2 panels, the navigation controls aren't shown, and so panels from the third onwards won't appear. If anyone has a solution for this, it would be gratefully received!

$(document).ready(function() {

    $('body').css('overflow-x', 'hidden');
    $('#slideshow span#left').hide();

    var w = $(document).width();
    var wt = w * 0.5;
    var wtf = w * 0.75;
    var wtfbbq = w * 0;
    var number = $('#slideshow li').length;
    var numbers = number * 1.5;

    //
    //  Change the speed of the slider
    //
    var speed = 500;
    //
    //
    //

    $('#slideshow').css('width', w * 20);
    $('#slideshow li').css({'width': w, 'margin-right': wt});

    $('span#right').click(function() {
        $('#slideshow li').animate({'marginLeft': (-wtf) }, speed);
        $(this).hide();
        $('#slideshow span#left').show();
        $('#slideshow li:eq(0)').css('opacity', '0');
    });
    $('span#left').click(function() {
        $('#slideshow li').animate({'marginLeft': wtfbbq}, speed);
        $(this).hide();
        $('#slideshow span#right').show();
        $('#slideshow li:eq(0)').css('opacity', '1');
    });

    if(w < 1280) {
        $('#slideshow img').css('left', '0');
    }

});