Trouble with jQuery event refreshing

Question

Hi,

I am using jQuery to make a custom carousel. After delivering a jCarousel implementation as part of a project, the test team have raised a lot of bugs and so I decided to write my own as I always find it difficult to find a plug-in that does exactly what I want (need) it to do.

My current problem is that I can get it to scroll once when clicking my 'down' button, but I don't know how to update the 'event' to tell the script that the scroll event fired and to refresh the 'current element'. I think I need to use a 'callback' but I don't really know if this is the case and when I tried it [as in: jQuery(".element").click(function(){ 'fire event stuff' }, function(){ 'fire event callback stuff' })] it doesn't run.

Each of the li's have a variable height so I am trying to count each child li and calculate its height by using next() on the current element (which I get by hard-coding :first when the script loads). I am trying to pass the height of next() to the currentHeight variable on each click of the next button.

I hope this makes sense. My code is below:

var initialItemHeight;
var currentItem;
var currentItemHeight;
var currentList;
var currListSize;
var amountToScroll;
var nextItem;
var nextItemHeight;

function TabCompactor_init(){
    //Start off by showing the first group
    currentList = jQuery("#scrolling-list-window").find(".compactor-group").eq(0);
    currentList.show();

    //Get the number of children of the first list
    currListSize = currentList.find("ul > li").size();
    //alert(currListSize);

    //Get the height of the topmost element
    currentItem = jQuery(".compactor-group ul li:first");
    currentItemHeight = currentItem.outerHeight();

    //Get the height of the next element
    nextItem = currentItem.next();
    nextItemHeight = nextItem.outerHeight();


    //Set the counter variable to 1
    var listIndex = 1;


    var nextBtn = jQuery(".chrome-next");
    nextBtn.click(function(){
        listIndex += 1;

        jQuery(".compactor-group ul").css({
            "top": -currentItemHeight
        });


        if (listIndex >= currListSize) { listIndex = currListSize   };
    })

    var prevBtn = jQuery(".chrome-prev");
    prevBtn.click(function(){
        jQuery(".compactor-group ul").css({
            "top": 0
        });
        listIndex -= 1;
        if (listIndex <= 1) {
            listIndex = 1
        };

    })

HTML:

<div class="scrollable-list-block-module">  
    <div class="scrolling-text-list">
        <div id="scrolling-list-window">
            <div id="compactor-group-01" class="compactor-group">
                <ul>
                    <li>                                                            
                        <p class="plaintext">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas</p>
                    </li>
                    <li>                                                            
                        <p class="plaintext">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    </li>
                    <li>                            
                        <p class="plaintext">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    </li>
                    <li>                                                            
                        <p class="plaintext">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    </li>
                    <li>                                                            
                        <p class="plaintext">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam</p>
                    </li>
                    <li>                                                            
                        <p class="plaintext">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    </li>   
                </ul>
            </div>
            <div id="tab-nav">
                <div class="view-all">
                    <a href="#">View all testimonials</a>
                </div>  
                <div class="tab-btn-chrome chrome-prev">
                    <div class="previous"></div>
                </div>
                <div class="tab-btn-chrome chrome-next">
                    <div class="next"></div>
                </div>          
            </div>
        </div>
    </div>
</div>