Плагин elastislide - это слайдер, который реагирует на изменение размеров окна браузера и подстраивается под него. Таким образом обеспечивается работа на экранах любых размеров. А также elastislide использует плагин jQuery Touchwipe Plugin, который позволяет листать изображения пальцем на iPhone, iPad или iPod Touch.

HTML

                <div id="carousel" class="es-carousel-wrapper">
                    <div class="es-carousel">
                        <ul>
                            <li><a href="#"><img src="images/large/1.jpg" alt="image01" /></a></li>
                            <li><a href="#"><img src="images/large/2.jpg" alt="image02" /></a></li>
                            <li><a href="#"><img src="images/large/3.jpg" alt="image03" /></a></li>
                            ...
                        </ul>
                    </div>
                </div>

CSS

/* Elastislide Style */
.es-carousel-wrapper{
    background: #101010;
    padding:10px 37px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    position:relative;
}
.es-carousel{
    overflow:hidden;
    background:#000;
}
.es-carousel ul{
    display:none;
}
.es-carousel ul li{
    height:100%;
    float:left;
    display:block;
}
.es-carousel ul li a{
    display:block;
    border-style:solid;
    border-color:#222;
}
.es-carousel ul li a img{
    display:block;
    border:none;
    max-height:100%;
    max-width:100%;
}
.es-nav span{
    position:absolute;
    top:50%;
    left:12px;
    background:transparent url(../images/nav.png) no-repeat top left;
    width:14px;
    height:26px;
    margin-top:-13px;
    text-indent:-9000px;
    cursor:pointer;
    opacity:0.8;
}
.es-nav span.es-nav-next{
    right:12px;
    left:auto;
    background-position:top right;
}
.es-nav span:hover{
    opacity:1.0;
}

jаvascript

jQuery, easing и сам плагин elastislide:

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
        <script type="text/javascript" src="js/jquery.elastislide.js"></script>
        <script type="text/javascript">
            
            $('#carousel').elastislide({
                imageW     : 180,
                minItems    : 5
            });
            
        </script>

Опции

speed       : 450,
// скорость анимации
easing      : '',
// easing эффект
imageW      : 190,
// ширина картинки
margin      : 3,
// отступ справа от изоюражения
border      : 2,
// ширина границы изображения
minItems    : 1,
// минимальное количество отображаемых картинок.
current     : 0,
// index of the current item
// when we resize the window,
// the plugin will make sure that
// this item is visible
onclick     : function() { return false; }
// click item callback
// Example of how to get the index
// of the clicked element:
/*
$('#carousel').elastislide({
    onclick  :  function( $item ) {
        alert( 'The clicked item?s index is ' + $item.index() )
    }
});
*/

Картинки можно добавлять и динамически с помощью php, например так:

var $items  = $('<li><a href="#"><img src="images/large/1.jpg" alt="image01" /></a></li><li><a href="#"><img src="images/large/2.jpg" alt="image01" /></a></li>');
$('#carousel').append($items).elastislide( 'add', $items );