I'm trying to create a custom next/prev navigation where clicking the "next" button will animate the margin left by X on each click until reaching the end (-320px), with a similar method for the back button. Here is the JavaScript code I've been working on:
function myFunction() {
"use strict";
if (jQuery) {
var $next = $(".next"),
$back = $(".back"),
$box = $(".box"),
regWidth = $box.width(),
$contain = $(".contain"),
len = 0,
combinedWidth = 0,
len = $box.length;
while (len--) {
combinedWidth = combinedWidth + $($box[len]).width();
}
$contain.width(combinedWidth);
$next.bind('click', function (e) {
e.preventDefault();
var $this = $(this),
$tWidth = $this.width();
$contain.animate({
marginLeft: "+=" + (-regWidth) + "px"
});
});
//click event for back
$back.click(function (e) {
e.preventDefault();
var $this = $(this),
$tWidth = $this.width();
$contain.animate({
marginLeft: "+=" + (regWidth) + "px"
});
});
}
};
$(function () {
myFunction();
});
The CSS for this code is shown below:
#wrap {
width:320px;
margin:0 auto;
overflow:hidden;
}
.contain {
float:left;
background:#e9e9e9;
height:480px;
}
.box
{
min-height:75px;
}
I would greatly appreciate any assistance!