CarouFredSel Current Slide

HTML

<script src="http://caroufredsel.dev7studios.com/js/jquery/jquery.carouFredSel-6.0.5-packed.js"></script>
<div id="carousel">
    <div class="slide">
        <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_caramel.jpg" />
    </div>
    <div class="slide">
        <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_donut.jpg" />
    </div>
    <div class="slide">
        <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
    </div>
</div>
<a id="prev" href="#"><span>prev</span></a>
 <a id="next" href="#"><span>next</span></a>

 <div class="logbox">Showing item</div>

CSS

.caroufredsel_wrapper {
    margin: auto;
}
.slide {
    margin: 0px;
    float: left;
}
.slide img {
    width: 500px;
    height: 300px;
}
#prev, #next {
    position: absolute;
    top: 45%;
    color: white;
    background-color: black;
    padding: 20px;
}
#next {
    right: 0px;
}

JavaScript

$("#carousel").({
	auto		: false,
	next		: "#next",
    prev		: "#prev",
	scroll		: {

        
		onAfter : function( data ) { 
			$(this).trigger("currentPosition", function( pos ) {
				var txt = "Showing item " + (pos+1);
				$(".logbox").html( txt );
			});
            
            $(data.items.old[0]).removeClass('current');
            $(data.items.visible[0]).addClass('current');
            
            console.log(data.items.old[0]);
            console.log(data.items.visible[0]);
		},
        
        onBefore : function( data ) { 
			//alert("before");
		}
        
        
        
        
	}
})