Slider Issue

Slider Issue

This almost works... almost.

  1. $(document).ready(function(){

  3. var n = 0;
  4.     var totalImageWidth = 0;
  5. var totalLi = $('#containerBadgeC li').size();
  6. var totalLiScroll = totalLi - 4;
  8. for(i=0; i<totalLi; i++) { 
  9.     totalImageWidth += $('#containerBadgeC ul li').eq(i).outerWidth( true );
  10. }
  12. $('#containerBadgeC').css('width', totalImageWidth);

  14. $('.arrowRight').click(function() {
  15. $('#containerBadgeC ul li').eq(n).animate(
  16. {width:'hide',marginRight:'0',opacity: 'hide'},
  17. {duration: 600, easing: 'swing', queue: true}
  18. );
  19. if (n >= totalLiScroll )
  20. { 
  21.   n = totalLiScroll;
  22.   }
  23.   else
  24.   {n++;}
  25. });
  27. $('.arrowLeft').click(function() {
  28. if (n <= 0 )
  29. { 
  30.   n = 0;
  31.   }
  32. else if(n <= totalLiScroll){
  33. n--;
  34. $('#containerBadgeC ul li').eq(n).animate(
  35. {width:'show',marginRight:'40px',opacity: 'show'},
  36. {duration: 600, easing: 'swing', queue: true}
  37. );
  38. }
  39. });
  40. });
This here is speaking to an unordered list which contains button like images all of the same height but of varying widths. The code actually does work for the most part except when say there is 20 items, when going from left to right the 17th disappears and never reappears.

The items slide either left or right when using arrow images that are parallel to the image slider. The right button makes it go right and the left makes it go left.