Javascript → jQuery Tools Scrollable — лёгкий скроллер контента

Хочу рассказать о лёгком jQuery скроллере (слайдер? карусель?) jQuery Tools Scrollable.

Возможности

• Горизонтальный и вертикальный скроллинг
• Скроллинг с помощью навигационных кнопок, поддержка клавиатуры и мышиного скролла.
• Любое количество скроллируемых элементов.
• Различная ширина как для скроллера, так и для элементов, в том числе в процентах.
• Программируемые действия.
• Возможность динамически добавлять элементы.
• Возможность установить бесконечный цикл, без начала и конца.
• Маленький размер: меньше 2 kb в gzip-e.

Использование

Подключаем jQuery и jQuery Tools:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://cdn.jquerytools.org/1.2.7/tiny/jquery.tools.min.js"></script>

Минимальная разметка:

<div class="scrollable">
    <div class="items">
        <a href="images/01.jpg" target="_blank"><img src="images/01-thumb.jpg" alt="" /></a>
        <a href="images/02.jpg" target="_blank"><img src="images/02-thumb.jpg" alt="" /></a>
        <a href="images/03.jpg" target="_blank"><img src="images/03-thumb.jpg" alt="" /></a>
        <a href="images/04.jpg" target="_blank"><img src="images/04-thumb.jpg" alt="" /></a>
        <a href="images/05.jpg" target="_blank"><img src="images/05-thumb.jpg" alt="" /></a>
        ...
    </div>
</div>
<input type="button" class="prev" value="← назад">
<input type="button" class="next" value="вперёд →">

С плагином не идёт никаких стилей, их нужно определить самому. Минимальный необходимый набор (без них скрипт работать не будет):

/* стиль для видимой части скроллера */
.scrollable {
    position: relative;
    overflow: hidden;
    width: 440px;
    height: 155px;
}

/* стиль враппера со всеми элементами */
.scrollable .items {
    width: 20000em;
    position: absolute;
}

Ширину и высоту видимой части скроллера можно указать любую, в том числе в процентах.

Последний штрих, это инициализация плагина:

$(function(){
    $('.scrollable').scrollable();
});

Пример получившегося скроллера.

Если добавить немного стилей, то можно получить довольно неплохой результат.

Минусы плагина:

• Чтобы указать число элементов, на которые будет производится скролл, нужно изменять html разметку.
• Можно скроллить вплоть до единственного видимого элемента, даже если после него ничего нет.