Проблема с jQuery Slider

Question

У меня возникли трудности с правильной работой кнопки ползунка. Ползунок просто угасает первого ребенка и добавляет его к концу своего родителя, ничего особенного. Кажется, что когда нажата кнопка «Назад», она не исчезает, и первый ребенок зависает, пока цикл не будет завершен, я не уверен, почему. Я был бы рад помочь с этим.

jsfiddle: http://jsfiddle.net/853mtc1s/

setInterval(function() { 
    $(slider_wrapper_id + ' :first').fadeOut('fast',function() { 
     $(this).next('div.slide').fadeIn().end().appendTo(slider_wrapper_id); 
    }); 

},4000); 
$('.slider-control-forward').on('click', function(){ 
    $(slider_wrapper_id + ' :first').fadeOut('fast', function(){ 
     $(this).next('div.slide').fadeIn().end().appendTo(slider_wrapper_id); 
    }); 
}); 
$('.slider-control-back').on('click', function(){ 
    $(slider_wrapper_id + ' :first').fadeOut('fast', function(){ 
     $(this).last('div.slide').fadeIn().end().appendTo(slider_wrapper_id); 
    }); 
}); 

Answer 1

Хорошо, я действительно не знаю, почему это один так трудно думать. В вашей функции forward вы используете jquery next(), который выбирает следующего брата. Однако в своей обратной функции вы выбираете свой элемент с помощью $ (this) .last ('div.slide'). Так как $ (this) имеет только один элемент в своей коллекции, вы выбираете себя. Это связано с тем, что последняя функция jquery не выбирает последний родной брат, а вместо этого «Выбирает последний согласованный элемент». Чтобы получить элемент, который вы хотите для fadeIn, вам нужно выбрать его с помощью $ (this) .siblings(). Last(). Следующая ошибка вызывает end(). AppendTo(). Это приведет к потере ваших элементов. Вы не хотите, чтобы end(), потому что элемент, который вы хотите переместить, - это тот же самый, который вы только что исчезли (в отличие от операции forward, где элемент, который вы хотите переместить, является предыдущим родным братом, к которому вы только что исчезли). Таким образом, чтобы переместить элемент, который вы просто исчезли в передней части очереди, добавьте его, не используя end(). В вашей обратной функции, изменить:

$(this).last('div.slide').fadeIn().end().appendTo(slider_wrapper_id); 

к:

$(this).siblings().last().fadeIn().prependTo(slider_wrapper_id); 

и он будет работать, как хотелось бы.