Как в скрипте слайдера на jQuery реализовать переход на определенный слайд?

Question

[elailasou]

Код здесь:
jsfiddle.net/junk1114/y5syLv1t

Answer 1

[Евгений Петров]

1. Вы смотрите клик на ссылке, а номер берёте из контейнера. Никакой взаимосвязи.

2. Горизонтальная лента реализуется с помощью display:inline-block и white-space:nowrap, а не плавающими элементами и костылями на JS.

3. Ширина указана и в CSS, и как значение переменной в JS. Дубляж — всегда плохо. Кстати, и в CSS приличное количество правил дублируется.

4. В обработчиках событий не указывают return false. Это — только при работе с атрибутами событий, чем никто в здравом уме не занимается. У разработчиков jQuery здравый ум.
Хотите знать, как отменяется действие по умолчанию — читайте про preventDefault().

5. Очевидно, что клики на любой элемент прокрутки, будь то переход на следующий слайд, или к конкретному слайду, это — однотипное действие и должно обслуживаться одним обработчиком. Отличие таких элементов — в классе для визуализации и data-атрибуте для навигации.

6. Крокодилы

var currentSlide=parseInt($('.slidewrapper').data('current'));
currentSlide++;
if(currentSlide>=$('.slidewrapper').children().size())
{
	currentSlide=0;
}

на самом деле гномы

var currentSlide = (parseInt(container.data('current')) + 1) % container.children().length;

7. А что такое container? Это — ссылка на единожды сформированный и сохраненный объект, отвечающий за контейнер для слайдов.

В общем, единственная причина для написания своего слайдера — обучение. Как решение это не годится. Учитесь, исправляйте ошибки.
А код я бы переписал. Начисто. Включая CSS.

Answer 2

[Артём]

Добавь ссылкам с номерами какой-нибудь класс:

<a href='#' class='slide-1 num'>1</a>
<a href='#' class='slide-2 num'>2</a>
<a href='#' class='slide-3 num'>3</a>

$('.num').click(function(){
            var index = $('.num').index($(this));
            gotoSlide(index);
            return false;
        });

function gotoSlide(i){
        var currentSlide=i;
        if(currentSlide>=$('.slidewrapper').children().size())
        {
            currentSlide=0;   
        }
        $('.slidewrapper').animate({left: -currentSlide*slideWidth},300).data('current',currentSlide);
        return false;
    }