jQuery - Создание собственного слайдера?

Question

Я все еще изучаю jQuery, и я знаю, что то, о чем я прошу, вероятно, довольно избыточно, поскольку уже есть сотни слайдеров, которые будут намного лучше, чем конечный результат моего.

Тем не менее, я пытаюсь учиться, и я поставил себе задачу сделать слайдер, поэтому любая помощь, которую вы можете мне дать, была бы замечательной!

Вот что я до сих пор:http://jsfiddle.net/eLgBG/

$(document).ready(function() { 

    $('.thumb').click(function(event){ 
     var idAttr = $(this).attr('rel'); 


     $('.thumb').removeClass('active'); 
     $(this).addClass('active'); 


     $('.banner').hide("slide", {direction: "left"}, 500); 
     $('.banner-' + idAttr).show("slide", {direction: "right"}, 500); 


     if($('.thumb').hasClass('active')){ 
      return false; 
     } 


    }) 
}); 

Основные вещи, которые я хотел бы достичь:

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

• Когда вы щелкаете вкладку, которая уже активна, я не хочу, чтобы она ничего не делала. Я попытался исправить это один, но я не могу заставить его работать

  if($('.thumb').hasClass('active')){ 
       return false; 
      } 
  

Любая помощь будет здорово, спасибо !! :)

Answer 1

Это зафиксирует ваш 1-й и 3-й пули:

http://jsfiddle.net/H9tJc/1/

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

$(document).ready(function() { 
     var currentRel = -1; 

     $('.thumb').click(function(event){ 
      var idAttr = $(this).attr('rel'); 

      $('.thumb').removeClass('active'); 
      $(this).addClass('active'); 

      if(parseInt(idAttr)>currentRel) { 
       $('.banner').hide("slide", {direction: "left"}, 500); 
       $('.banner-' + idAttr).show("slide", {direction: "right"}, 500); 
      } 
      else if(parseInt(idAttr)<currentRel) { 
       $('.banner').hide("slide", {direction: "right"}, 500); 
       $('.banner-' + idAttr).show("slide", {direction: "left"}, 500); 
      } 

      currentRel = parseInt(idAttr); 

     }) 
    });