Вопрос по созданию карусели

[prowoke]

Здравствуйте. Вот у меня такое вопрос к вам будет. Есть такой вариант интернет магазина. Я его делаю для тренировки. Вот как он выглядит:

http://imglink.ru/show-image.php?id=bce92b3bdc5636c4b347fce8c9bc2b41

Там где стрелки для перелистывания мини изображений диска хочу сделать что-то типа карусели. Есть ли готовые вещи для подобной галереи? Что я нашёл, они мало подходят. Так вот вопрос. Если нету готовых, то хочу сделать сам. Я сам знаю основы js, но с jquery знаком лишь на уровне использования готовых вещей, и мне хотелось бы научиться делать самому такую карусель, есть ли мануал какой типо быстроее введение в jquery? Всё, что я нашёл в гугле, они мало подходят, а книге читать по jquery долго. ПОсоветуйте какой нить мануал или книгу по jquery, если мануала нету хорошего. Но надо такой материал, чтобы он подходил под мою задачу.

[Svatov]

По поводу конкретного мануала подсказать не могу, не знаю видели ли вы или нет, вот здесь на форуме есть отдельная тема посвященная Карусели на JQuery...по идее там все хорошо расписано, чтобы по аналогии сделать самому, вдруг вам поможет. Ссылка на тему про КАРУСЕЛЬ

А из книг вот могу посоветовать JQuery In Action (BEAR BIBEAULT

YEHUDA KATZ),издательства MANNING, правда на английском языке, сам по ней сейчас учусь.

[gibigate]

только что писал карусель, вот код

$('.carousel ul').each(function() {//задает ширину <ul> которые высчитываются из li
            var width = 0;
            $(this).children('li').each(function() {
               width = width + parseInt($(this).css('width'));
            });
            $(this).css({'width':width});
            }

$('.carousel').each(function() {//добавляет автоматически кнопки
            $(this).append('<a href="#" class="l-handle"></a><a href="#" class="r-handle"></a>')
         });
         $('a.l-handle').live('click', function() {//нажатие на левую кнопку
            var ul = $(this).siblings('ul');//находит <ul>
            var li = parseInt(ul.children('li').css('width'));//считает ширину <li>
            if (parseInt(ul.css('left')) != 0) {//проверка чтобы нельзя было передвинуть если справа нет больше элементов
               ul.animate({'left':parseInt(ul.css('left')) + li}, 500);//само движение 500-скорость
            }
            return false;//чтобы ссылка не кидала вверх страницы
         });
         $('a.r-handle').live('click', function() {
            var ul = $(this).siblings('ul');
            var li = parseInt(ul.children('li').css('width'));
            if (parseInt(ul.css('left')) >= 0) {
               ul.animate({'left':parseInt(ul.css('left')) - li}, 500);
            }
            return false;
         });

собственно работает на все элементы у которых есть класс carousel

структура должна быть такая

<div class="carousel anyclass">
<ul>
<li></li>
</ul>
</div>

у карусели должна быть ширина, relative и overflow. Также должны быть два класса с картинками-стрелками. Например

.carousel {position:relative;width:800px;overflow:hidden;height:200px;}
.l-handle {position:absolute;top:70px;left:20px;width:20px;height:20px;background:#000}
.r-handle {position:absolute;top:70px;left:20px;width:20px;height:20px;background:#000}
.carousel ul li {float:left;width:200px;}

Вроде все, ах да еще не проверял на кроссбраузерность. Так что сделай милость чекни)