Elastislide - A Responsive jQuery Carousel

<ul id="carousel" class="elastislide-list">
    <li><a href="#"><img src="images/1.jpg" alt="image01" /></a></li>
    <li><a href="#"><img src="images/2.jpg" alt="image02" /></a></li>
    <li><a href="#"><img src="images/3.jpg" alt="image03" /></a></li>
    <!-- ... -->
</ul>

$('#carousel').elastislide()

$.Elastislide.defaults = {
    // orientation 'horizontal' || 'vertical'
    orientation : 'horizontal',
    // sliding speed
    speed : 500,
    // sliding easing
    easing : 'ease-in-out',
    // the minimum number of items to show.
    // when we resize the window, this will make sure minItems are always shown
    // (unless of course minItems is higher than the total number of elements)
    minItems : 3,
    // index of the current item (left most item of the carousel)
    start : 0,
    
    // click item callback
    onClick : function( el, position, evt ) { return false; },
    onReady : function() { return false; },
    onBeforeSlide : function() { return false; },
    onAfterSlide : function() { return false; }
};

var carousel = $('#carousel').elastislide();
...
$('#carousel').append("<li><a href="#"><img src="images/10.jpg" alt="image03" /></a></li>");
carousel.add();