I'm currently facing an issue with my setup where I want only the images to move left or right when I click on the previous/next buttons, without affecting the rest of my website such as the header. Although I have tried using window.scrollX in jQuery, I need assistance in allowing only the div '#imageWrapper' to move while keeping everything else stationary. Any help with this jquery query would be greatly appreciated.
If you'd like to see what exactly I am looking for, please check out my jsfiddle.
Can anyone provide guidance?
Here is my fiddle - http://jsfiddle.net/s2TJQ/441/
$(function() {
var boxLefts = [];
$('.images').each(function(i, el) {
boxLefts.push(this.offsetLeft);
});
$("input").click(function(e) {
var dir = false,
targetLeft = -1;
var target = e.target.className;
if (target == 'next') {
dir = 1;
} else {
dir = -1;
}
if (dir) {
e.preventDefault();
winLeft = window.scrollX;
$.each(boxLefts, function(i, v) {
if ((dir == 1 && winLeft < v && targetLeft < 0) || (dir == -1 && winLeft > v)) {
targetLeft = v;
}
});
if (targetLeft >= 0) {
$('html:not(:animated), body:not(:animated)').stop().animate({
scrollLeft: targetLeft
}, 1000);
}
}
return false;
});
});