SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict
    Join Date
    May 2008
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Creating a counter for jcarousel lite

    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

  2. #2
    SitePoint Addict
    Join Date
    May 2008
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •