Getting pagination to work with custom carousel

Question

I am attempting to create a carousel(demo) with pagination. When the user clicks the blocks on the bottom it should cycle to that corresponding image. The code below is what I currently have. Mind the console mumdo jumbo. Right now I am determining whether or not the user is clicking after or before the visible block.

//grab the width and calculate left value
var item_width = $('#slides li').outerWidth(); 
var left_value = item_width * (-1); 

//if user clicks on pagination block
$('#pagination ul li').click(function() {
    var $this = $(this);
    var temp = $(this).index() + 1;
    var current = $('#pagination li a.active').parent().index() + 1; // console.log(current + " : " + temp );

    if (current <= temp) {
        // get difference of temp and current (temp - current)
        var jump = Math.abs(temp - current);

        //get the right position
        var left_indent = parseInt($('#slides ul').css('left')) - item_width;

        //slide the item
        $('#slides ul').animate({'left' : left_indent}, 300, function () { 

            //active pagination
            $('#pagination li a.active').removeClass('active');
            $this.children().addClass('active');

            //move the first item and put it as last item
            $('#slides li:last').after($('#slides li:first'));                  

            //set the default item to correct position
            $('#slides ul').css({'left' : left_value}); 
            //debugging nonsense
            console.log( "left_indent: " + left_indent + "px" + "\n" + "left_value: " + left_value + "px" + "\n" + "current slide: " + current + "\n" + "future slide: " + temp + "\n" + "difference: " + jump);

        });

    } else if (current >= temp) {
        // get difference of temp and current (temp - current)
        var jump = Math.abs(temp - current);

        //get the right position            
        var left_indent = parseInt($('#slides ul').css('left')) + item_width;

        //slide the item            
        $('#slides ul').animate({'left' : left_indent}, 300,function(){    

            //active pagination
            $('#pagination li a.active').removeClass('active');
            $this.children().addClass('active');

            //move the last item and put it as first item               
            $('#slides li:first').before($('#slides li:last'));           

            //set the default item to correct position
            $('#slides ul').css({'left' : left_value});

            //debugging nonsense
            console.log( "left_indent: " + left_indent + "px" + "\n" + "left_value: " + left_value + "px" + "\n" + "current slide: " + current + "\n" + "future slide: " + temp + "\n" + "difference: " + jump);

        });

    }

});  

I have tried gettting difference of temp and current:

var jump = Math.abs(temp - current);

and then multiplying both

$('#slides ul').animate({'left' : left_indent * jump}, 300, function () { 
$('#slides ul').css({'left' : left_value * jump}); 

by jump, but it isn't working. I get a blank space after a few jumps.

I can't seem to target the relationship between left_indent, left_value and the pagination. Any help is appreciated.

jsFiddle: http://jsfiddle.net/hyTeq/

Answer 1

There is a LOT of code in your fiddle so i have created an example what you could do to show your picture (this will hopefully get you started...) :

Fiddle example

$(document).ready(function(){
$('.container div:first').addClass('active');
$('.container div:not(.active)').hide();
$('.pagination div').click(function(){
//Get the index of pagination and store it in VAR
var getPaginationIndex = $(this).index();
//alert(getPaginationIndex);
$('.active').hide().removeClass('active');
//get div and apply stored index of clicked pagination
//and show it...
$('.container div').eq(getPaginationIndex).show().addClass('active');
});
});