jQuery + css3 переход на слайдер

Question

мои анимации хорошо работают, но мне нужна помощь в вычислении правильных пикселей для translateX.

Currenltly вычисляет только первый клик на .next .prev

$('.prev').click(function(e) { 
    e.preventDefault(); 
    var idx = $('.wrap.fadeIn').addClass('fadeout').removeClass('fadeIn').css("transform", "translateX(" + $(this).index() * 160 + "px)").index() - 1; 
    $('.wrap').eq(idx).addClass('fadeIn').removeClass('fadeout').css("transform", "translateX(" + $(this).index() * -0 + "px)"); 
    updateNav(); 
}); 

$('.next').click(function(e) { 
    e.preventDefault(); 
    var idx = $('.wrap.fadeIn').addClass('fadeout').removeClass('fadeIn').css("transform", "translateX(" + $(this).index() * -160 + "px)").index() + 1; 
    $('.wrap').eq(idx).addClass('fadeIn').removeClass('fadeout').css("transform", "translateX(" + $(this).index() * -160 + "px)"); 
    updateNav(); 
}); 

http://jsfiddle.net/JQq5n/462/ (светлячок)

Answer 1

Во-первых,

Ваш индекс неправильно $ (это) относится к $ ('предыдущая')/$ ('. next')

var idx = $ ('. Wrap.fadeIn'). AddClass ('fadeout'). RemoveClass ('fadeIn'). Css ("transform", "translateX (" + $ (this) .index() * 160 + "px)"). index() - 1;

После того, как я отсортирован, что из - Я просмотрел ваш .container с переливом: прокручивать

4-.wrap был заворачивают на следующую строку.

Увеличение ширины ul позволило решить эту проблему.

ul {ширина: 1300px; }

Я также нашел смещение, как (ширина .container в) 320px блок

Наконец - мы теперь имеем .wraps в одной строке, а также правильное значение индекса и правильное смещение

Объединяя вышеуказанные значения, как

$('.prev').click(function (e) { 
    e.preventDefault(); 
    var idx = $('.wrap.fadeIn').index() - 1; 
    $('.wrap.fadeIn').addClass('fadeout').removeClass('fadeIn') 
     .css("transform","translateX(" + 320 * idx + "px)").index() - 1; 
    $('.wrap').eq(idx).addClass('fadeIn').removeClass('fadeout') 
     .css("transform", "translateX(" + -320 * idx + "px)"); 
    updateNav(); 
}); 

$('.next').click(function (e) { 
    e.preventDefault(); 
    var idx = $('.wrap.fadeIn').index() + 1; 
    $('.wrap.fadeIn').addClass('fadeout').removeClass('fadeIn') 
     .css("transform", "translateX(" + -320 * idx + "px)").index() + 1; 
    $('.wrap').eq(idx).addClass('fadeIn').removeClass('fadeout') 
     .css("transform", "translateX(" + -320 * idx + "px)"); 
    updateNav(); 
}); 

я смог достичь функциональности functional state

Мне не понравилось пустое пространство, вызванное задержкой для поздних .wraps, поэтому я изменил переход на основе индекса, и я получил this.