jQuery + css3 transition on a slider

Question

my animations works well, but I need help to calculate the correct pixels for the translateX.

Currenltly only calculates the first click on .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/ (firefox)

Answer 1

Firstly,

Your index is wrong $(this) refers to the $('.prev') / $('.next')

var idx = $('.wrap.fadeIn').addClass('fadeout').removeClass('fadeIn').css("transform", "translateX(" + $(this).index() * 160 + "px)").index() - 1;

Once I sorted that out - I viewed your .container with overflow:scroll

The 4th .wrap was being wrapped to the next row.

Increasing the width of ul solved this problem.

ul { width: 1300px; }

I also found the unit offset as 320px ( .container's width )

Finally - we now have the .wraps in one line and also the correct index value and the correct offset

Bringing together the above values like

$('.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();
});

I was able to achieve functionality functional state

I did not like the white space caused by the delay for the later .wraps so I tweaked the transition based on the index and I got this.