Creating a counter for jcarousel lite

**parkerproject** · Sep 14, 2012 14:50

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

And the code

html
====

HTML Code:

<!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">&lt;&lt;</button>
<button class="next">&gt;&gt;</button>
<div id="display">1 <i> of </i> 2</div>   
        
    </body>
</html>

Any help will do.

Thanks

**parkerproject** · Sep 14, 2012 16:09

The path to the image is https://c9.io/parkerproject/playgrou...pace/test.jpeg

User Tag List

Thread: Creating a counter for jcarousel lite

Thread Tools

Display

Creating a counter for jcarousel lite

Bookmarks

Bookmarks

Posting Permissions