Creating a counter for jcarousel lite

JavaScript
1

I’m having a little problem creating a counter for jcarousel lite. You is my demo: http://bit.ly/SlXXz7

And the code

html


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://c9.io/parkerproject/playground/workspace/jcarouselremix.js"></script>
<script>
$(document).ready(function(){
     $("#mycarousel").jCarouselLite({
          visible: 3,
          rows: 2 ,
          circular: false,
          btnNext: ".next",
          btnPrev: ".prev",
          afterEnd: function(a) {
              var index = $(a[0]).index();
              mycarousel_itemFirstInCallback(index);
    }
     });
});

</script>

<script>
    function display(s) {
 $('#display').html(s);
};

function mycarousel_itemFirstInCallback(x) {
    display( x +"<i> of </i> 2");
};
</script>

<style>
  .test{
       width: 200px;
        }
</style>

</head>
    <body>
    <div id="mycarousel">
      <ul>
          <li><img src="test.jpeg" alt="" width="240p" height="184" /></li>
          <li><img src="test.jpeg" alt="" width="240p" height="184" /></li>
          <li><img src="test.jpeg" alt="" width="240p" height="184" /></li>
          <li><img src="test.jpeg" alt="" width="240p" height="184" /></li>
          <li><img src="test.jpeg" alt="" width="240p" height="184" /></li>
          <li><img src="test.jpeg" alt="" width="240p" height="184" /></li>
          <li><img src="test.jpeg" alt="" width="240p" height="184" /></li>
          <li><img src="test.jpeg" alt="" width="240p" height="184" /></li>
          <li><img src="test.jpeg" alt="" width="240p" height="184" /></li>
          <li><img src="test.jpeg" alt="" width="240p" height="184" /></li>
          <li><img src="test.jpeg" alt="" width="240p" height="184" /></li>
          <li><img src="test.jpeg" alt="" width="240p" height="184" /></li>
     </ul>
    </div>




<button class="prev"><<</button>
<button class="next">>></button>
<div id="display">1 <i> of </i> 2</div>

    </body>
</html>

Any help will do.

Thanks

2

The path to the image is https://c9.io/parkerproject/playground/workspace/test.jpeg