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.