Hi guys,

I know I posted this before, but I thought I'd do it again in a little more detail as I had no replies. - Sorry admins! you can delete my previous one and it was a pretty poor post.

I have a little experience in Javascript and would like to learn a bit more etc.

I am currently working for a company which wants me create / find a image scroller using javascript and jquery.

I found one which seems very suitable... I have customized the CSS and have coded it all up...

The problem i'm having is that the image scroller is scrolling 3 images at a time.

I would like it to scroller one at a time whilst showing all the images...

Example

scroller:

[ pic 1] [pic 2] [pic 3] [pic 4]

after scroll

[pic 2] [pic 3] [pic 4] [pic 1]

after next scroll

[pic 3] [pic 4] [pic 1] [pic 2]

and so forth.

If you look at this code you will see what I mean...

please help me learn and please help me complete this... im sure its just a little adjustment... but me not being too great at javascript... it makes me feel like im shooting in the dark.

Thanks alot

Code:
<style type="text/css" media="screen">
<!--
body { font: 1em "Trebuchet MS", verdana, arial, sans-serif; font-size: 100%; }
input, textarea { font-family: Arial; font-size: 125%; padding: 7px; }
label { display: block; } 

#textbanner {width:168px; height:118px; float:left;}

.infiniteCarousel {
  width: 618px;
  position: relative;
}

.infiniteCarousel .wrapper {
	width: 618px; /* .infiniteCarousel width - (.wrapper margin-left + .wrapper margin-right) */
	height: 115px;
	margin: 0 0px;
	position: relative;
	top: 0;
	border: 1px solid #E1E1E1;
}

.infiniteCarousel ul a img {
  border: 0px solid #666;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

.infiniteCarousel .wrapper ul {
	width: 625px; /* single item * n */
	list-style-image:none;
	list-style-type:none;
	margin:0;
	padding:0px 0px 0px 4px;
	position: absolute;
	top: 0px;
	left: 0px;
}

.infiniteCarousel ul li {
  display:block;
  float:left;
  padding: 0px 0px 0px 0px;
  height: 85px;
  width: 206px;
}

.infiniteCarousel ul li img {
    -webkit-transition: border-color 20ms;
}

.infiniteCarousel ul:hover li img {
  border-color: #666;
}

.infiniteCarousel ul:hover li:hover img {
  border-color: #000;
}

.infiniteCarousel ul li a img {
  display:block;
}



.infiniteCarousel .forward {
  background-position: 0 0;
  right: 0;
}

.infiniteCarousel .back {
  background-position: 0 -72px;
  left: 0;
}

.infiniteCarousel .forward:hover {
  background-position: 0 -36px;
}

.infiniteCarousel .back:hover {
  background-position: 0 -108px;
}



-->
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">

(function () {
    $.fn.infiniteCarousel = function () {
        function repeat(str, n) {
            return new Array( n + 1 ).join(str);
        }
        
        return this.each(function () {
            // magic!
            var $wrapper = $('> div', this).css('overflow', 'hidden'),
                $slider = $wrapper.find('> ul').width(9999),
                $items = $slider.find('> li'),
                $single = $items.filter(':first')
                
                singleWidth = $single.outerWidth(),
                visible = Math.ceil($wrapper.innerWidth() / singleWidth),
                currentPage = 1,
                pages = Math.ceil($items.length / visible);
                
            /* TASKS */
            
            // 1. pad the pages with empty element if required
            if ($items.length % visible != 0) {
                // pad
                $slider.append(repeat('<li class="empty" />', visible - ($items.length % visible)));
                $items = $slider.find('> li');
            }
            
            // 2. create the carousel padding on left and right (cloned)
            $items.filter(':first').before($items.slice(-visible).clone().addClass('cloned'));
            $items.filter(':last').after($items.slice(0, visible).clone().addClass('cloned'));
            $items = $slider.find('> li');
            
            // 3. reset scroll
            $wrapper.scrollLeft(singleWidth * visible);
            
            // 4. paging function
            function gotoPage(page) {
                var dir = page < currentPage ? -1 : 1,
                    n = Math.abs(currentPage - page),
                    left = singleWidth * dir * visible * n;
                
                $wrapper.filter(':not(:animated)').animate({
                    scrollLeft : '+=' + left
                }, 1000, function () {
                    // if page == last page - then reset position
                    if (page > pages) {
                        $wrapper.scrollLeft(singleWidth * visible);
                        page = 1;
                    } else if (page == 0) {
                        page = pages;
                        $wrapper.scrollLeft(singleWidth * visible * pages);
                    }
                    
                    currentPage = page;
                });
            }
            
                        
            // 6. bind the back and forward links
            $('a.back', this).click(function () {
                gotoPage(currentPage - 1);
                return false;
            });
            
            $('a.forward', this).click(function () {
                gotoPage(currentPage + 1);
                return false;
            });
            
            $(this).bind('goto', function (event, page) {
                gotoPage(page);
            });
            
            // THIS IS NEW CODE FOR THE AUTOMATIC INFINITE CAROUSEL
            $(this).bind('next', function () {
                gotoPage(currentPage + 1);
            });
        });
    };
})(jQuery);

$(document).ready(function () {
    // THIS IS NEW CODE FOR THE AUTOMATIC INFINITE CAROUSEL
    var autoscrolling = true;
    
    $('.infiniteCarousel').infiniteCarousel().mouseover(function () {
        autoscrolling = false;
    }).mouseout(function () {
        autoscrolling = true;
    });
    
    setInterval(function () {
        if (autoscrolling) {
            $('.infiniteCarousel').trigger('next');
        }
    }, 500);
});


</script>

</head>
<body>
    
    
<div id="textbanner"><img src="http://i46.tinypic.com/2r423yc.jpg" alt="" width="168" height="117" /></div>
 
    <div class="infiniteCarousel">
      <div class="wrapper">
        <ul>
          <li><a href="www.google.com"><img src="http://i49.tinypic.com/eu4x81.jpg" alt="" width="202" height="116" /></a></li>
          <li><img src="http://i49.tinypic.com/2ex8ttw.jpg" alt="" width="202" height="116" /></li>
          <li><img src="http://i45.tinypic.com/2gy0pkz.jpg" alt="" width="202" height="116" /></li>
        </ul>
             
      </div>
      
      
</div>


</body>
</html>