Set max horizontal scroll of div
<p>I have a jquery images scroller below that just scrolls horizontally left/right. The loop below could include an infinite number of images.</p>

<p>The problem I have is that while it scrolls left and right fine, once the images end you can just keep scrolling so essentially you're just scrolling over white space!</p>

<p>How can I set a max scroll so that when the images end it won't allow it to scroll anymore? Obviously the number of images is dynamic so it can have 1 or 100 images in there.</p>

<pre><code>&lt;div id="imgThumbs" class="scroller" style="position:relative;height:75px;width: 306px; overflow: hidden; white-space: nowrap;"&gt;
    &lt;a href="#" id="left-button" style="left:14px;top:25px;position:absolute;"&gt;
        &lt;img src="left-button.png" width="20" height="20" /&gt;
    &lt;/a&gt;  
    &lt;a href="#" id="right-button" style="right:14px;top:25px;position:absolute;"&gt;
        &lt;img src="right-button.png" width="20" height="20" /&gt;                               
    &lt;/a&gt;
    &lt;div id="contentScroller"&gt;                         
    &lt;?php $counter = 1; while(the_repeater_field('images')): ?&gt;                     
        &lt;a class="fancybox" rel="group" href="&lt;?php echo the_sub_field('high_resolution_image'); ?&gt;" style="text-decoration:none!IMPORTANT;color:white!IMPORTANT;" class="showImg"&gt;
            &lt;img class="image-&lt;?php echo $counter; ?&gt;" src="&lt;?php echo the_sub_field('image'); ?&gt;" width="90" height="68" alt="&lt;?php echo the_title(); ?&gt; &lt;?php echo $counter; ?&gt;" /&gt;
        &lt;/a&gt;
     &lt;?php $counter++; endwhile; ?&gt;
     &lt;/div&gt;
&lt;/div&gt;
&lt;script&gt;
    jQuery(document).ready(function ($) {
        $('#right-button').click(function() {
            $('#contentScroller').animate({
                marginLeft: "-=306px"
            }, "fast");
        });
        $('#left-button').click(function() {
            $('#contentScroller').animate({
                marginLeft: "+=306px"
            }, "fast");
        });                     
    });
&lt;/script&gt; 
</code></pre>

<h2>UPDATE</h2>

<p>Here's a fiddle - <a href="http://jsfiddle.net/jCskY/2/" rel="nofollow">http://jsfiddle.net/jCskY/2/</a></p>
