Слайдер изображений: циклическая прокрутка - Общие вопросы веб разработки

Делаю слайдер изображений.
Сейчас умею делать только fade, а надо чтобы была прокрутка по кольцу.
Как заставить слайды плавно крутится слева направо и справа налево - не знаю.
Пересмотрел 100500+ примеров в сети - не получается ничего.
Пробовал по примеру как здесь: http://www.howtomake.com.ua/front/prostoj-slajder-s-gorizontalnoj-prokrutkoj-svoimi-rukami.html - в результате плавной прокрутки нет, происходит резкая смена картинки без эффекта прокрутки.

Прошу помощи.

а надо чтобы была прокрутка по кольцу

http://javascript.ru/forum/jquery/50080-menyat-po-krugu-prozrachnost-ehlementov-v-div-start.html#post329969
использует замыкания, раз получает элементы DOM, а затем по кругу
На этом я учился
http://jsfiddle.net/vlasenkofedor/JqULS/ 

Блин, темная дубрава..

В общем, первый слайд не желает перемещаться в конец

Зачем клик по кнопке в цикл each засунул
$('.ai_slider_rbtn') - так писать очень плохо. Jquery должна просмотреть у всех элементов класс
лучше $('li.ai_slider_rbtn') еще лучше  $('li.ai_slider_rbtn', '#id') $('#id li.ai_slider_rbtn')  $('#id').find('li.ai_slider_rbtn')

$('.ai_slider_rbtn') находится за пределами $('.ai_slider_imgbox')
Потом поправлю, добавлю к каждому слайдеру свой id, сейчас он все равно один на странице, пока не важно.

Почему первый слайд не желает перемещаться в конец?

Почему первый слайд не желает перемещаться в конец?

Сделай демку в песочнице для начала http://learn.javascript.ru/play

Вроде сделал, крутит.
А как теперь прокрутить на нужный слайд по клику на буллет?

Сделал: http://learn.javascript.ru/play/oeE9h
Федору огромная благодарность за ссылки.

Когда же ты вынесешь свой код нажатия из each. И увидишь что он тебе не нужен
Еще один пример http://jsfiddle.net/vlasenkofedor/kLYJg/ 

Все в each потому, что слайдеров на странице может быть много. Ваш последний пример этого не учитывает, или я неправильно понял его (пример).

Все в each потому, что слайдеров на странице может быть много.

В подобных ситуациях так же пытаюсь это предусмотреть, кто и как будет потом использовать хз. Но тогда не надо использовать id, только классы.
$('#ai_slider_slide0', mainThis).find('.ai_slider_slidecontent').fadeIn(0);
=>
$('.ai_slider_slidecontent', mainThis).eq(0).fadeIn(0);
Медленнее, зато может быть их (слайдеров) много.
Также, чтобы у каждого из 100500 слайдеров на странице не отрабатывал один и тот же js-код, в начале кода инициализирую какую-нибудь переменную "мой слайдер" и оборачиваю весь js-код, относящийся к слайдеру (вместе с этой переменной), в "IF эта переменная не определена".

Зачем вобще их изобретать если слайдеров в инете куча? Взял какой нибудь наиболее подходящий, подпилил под свои нужды и все довольны

В подобных ситуациях так же пытаюсь это предусмотреть, кто и как будет потом использовать хз. Но тогда не надо использовать id, только классы.
$('#ai_slider_slide0', mainThis).find('.ai_slider_slidecontent').fadeIn(0);
=>
$('.ai_slider_slidecontent', mainThis).eq(0).fadeIn(0);
Медленнее, зато может быть их (слайдеров) много.
Также, чтобы у каждого из 100500 слайдеров на странице не отрабатывал один и тот же js-код, в начале кода инициализирую какую-нибудь переменную "мой слайдер" и оборачиваю весь js-код, относящийся к слайдеру (вместе с этой переменной), в "IF эта переменная не определена".

Про классы согласен, но в данном случае лучше id, имхо: при инициализации скрипта нумерация слайдов идет по порядку, #0 будет всегда первым, так зачем перебирать кучу, если можно обратиться сразу к нужному напрямую?
Про переменную: префикс ai_slider_ врядли использует кто-то еще, уж в пределах одного сайта - гарантированно нет. А слайдов и так 100500 ))

Зачем вобще их изобретать если слайдеров в инете куча? Взял какой нибудь наиболее подходящий, подпилил под свои нужды и все довольны

По сути взял в инете образец, выпилил лишнее, с помощью примеров Федора (уважение Спецу) допилил свое. Мне надо было совместить прокрутку с фэйдом - вот такого образца как раз не встречал, + клик по слайду - редирект на пункт меню, если указано (id меню прописываю в виде суффикса имени файла: image_101.png), без использования компонента (условия ТЗ). Это как раз тот случай, когда набор слайдов не планируется менять оч.долго.

Про классы согласен, но в данном случае лучше id, имхо

Вопрос не о том, как лучше в отдельно взятом слайдере, а в том, что любой ID должен быть в документе уникальным, т.е. 2-х одинаковых id (если кому-то захочется вывести 2 слайдера) быть не должно.

Так потому и идет конкретная привязка к конкретному экземпляру слайдера:
$('#ai_slider_slide0', mainThis)
Можно из без id обойтись, нарисовав data-, но так посчитал легче. Код вообще требует хорошего вылизывания, но js мне не оч. дается, потому - как есть, спасибо и на этом.

Лови пример инициализации. И слайдеры было хорошо бы так.
http://jsfiddle.net/vlasenkofedor/hyQnb/