prettyGallery - очередной слайдер изображений с навигацией по слайдам. Внешне неказист, но оформить с помощью CSS можно всё что угодно.

HTML

<ul class="gallery">
    <li><img src="images/thumbnails/t_1.jpg" width="60" height="60" alt="T 1" /></li>
    <li><img src="images/thumbnails/t_2.jpg" width="60" height="60" alt="T 2" /></li>
    <li><img src="images/thumbnails/t_3.jpg" width="60" height="60" alt="T 3" /></li>
    <li><img src="images/thumbnails/t_4.jpg" width="60" height="60" alt="T 4" /></li>
    <li><img src="images/thumbnails/t_5.jpg" width="60" height="60" alt="T 5" /></li>
</ul>

CSS

.prettyGalleryContainer {
    clear: both;
    float: left;
    margin: 0 0 10px 0;
}
    
    .prettyGalleryContainer a:focus { outline: none; }

    .prettyGalleryContainer img { border: 0; }

    .prettyGalleryContainer ul {
        margin: 0;
        padding: 0;
    }

        .prettyGalleryContainer ul li {
            display: block;
            float: left;
        }
        
            .prettyGalleryContainer ul li a,
            .prettyGalleryContainer ul li a img { display: block; }

    .prettyGalleryBackground {
        background: url(../images/prettyGallery/content_background.png) top left repeat;
        padding: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        margin: 0 0 10px 0;
    }

    .pp_alignleft { float: left; }
    .pp_alignright { float: right; }
    .pp_aligncenter { margin: 0 auto; }
        
    .pg_paging .pg_previous {
        background: url(../images/prettyGallery/pagingNav.png) top left no-repeat;
        display: block;
        float: left;
        height: 14px;
        margin: 1px 3px 5px 0;
        overflow: hidden;
        text-indent: -10000px;
        width: 9px;
    }
        .pg_paging .pg_previous:hover { background-position: 0 -14px; }
        
    .pg_paging .pg_next {
        background: url(../images/prettyGallery/pagingNav.png) top right no-repeat;
        display: block;
        float: left;
        height: 14px;
        margin: 1px 0 0 3px;
        overflow: hidden;
        text-indent: -10000px;
        width: 9px;
    }
        .pg_paging .pg_next:hover { background-position: 100% -14px; }
        
        .pg_paging li { text-align: center; }
        
        
    .pg_pages {
        background: url(../images/prettyGallery/pagingBackgroundLeft.png) top left no-repeat;
        float: left;
        padding-left: 8px;
    }
    
        .pg_pages ul {
            background: url(../images/prettyGallery/pagingBackgroundRight.png) top right no-repeat;
            float: left;
            height: 15px;
            padding-right: 9px;
        }
            .pg_pages ul li { line-height: 15px; }
            
            .pg_pages ul li.selected { font-weight: bold; }
        
        .pg_pages a {
            color: #fff;
            font-family: Arial;
            font-size: 11px;
            text-decoration: none;
            padding: 2px;
        }
            .pg_pages a:hover { color: #c4c4c4; }
            
        .pg_pages a.circle {
            display: block;
            background: url(../images/prettyGallery/pagingPageNumber.png) top left no-repeat;
            height: 8px;
            margin: 3px 1px 0 3px;
            padding: 0;
            text-indent: -10000px;
            width: 8px;
        }
            .pg_pages a.circle:hover,
            .pg_pages .selected a.circle { background-position: bottom left; }

jаvascript

Подключаем jQuery и плагин:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/jquery.prettyGallery.js" type="text/javascript"></script>

Выполняем инициализацию prettyGallery:

$(document).ready(function(){
    $("ul.gallery").prettyGallery();
});

Опции

$(document).ready(function(){
    $("ul.gallery").prettyGallery({
        itemsPerPage : 2,
        animationSpeed : 'normal', /* fast/normal/slow */
        navigation : 'top',  /* top/bottom/both */
        of_label: ' of ', /* The content in the page "1 of 2" */
        previous_title_label: 'Previous page', /* The title of the previous link */
        next_title_label: 'Next page', /* The title of the next link */
        previous_label: 'Previous', /* The content of the previous link */
        next_label: 'Next' /* The content of the next link */
    });
});