It went wrong when the currentSlide over the total slide. I use if conditions to restrict the range of currentSlide number, but the if condition can't return the value to the currentSlide. Here is the demo.
var pageLength = $(".image").length,
scrolling = false,
currentPage = 0,
pages = $(".image");
function pageMove() {
scrolling = true;
setTimeout(function() {
scrolling = false;
}, 500);
}
function navigateUp() {
if (currentPage > 1) {
currentPage--;
pageMove();
if (currentPage < 0) {
currentPage = pageLength;
}
}
pages[currentPage].style.transform =
"translateY(" + currentPage * 100 + "%)";
}
function navigateDown() {
if (currentPage < pageLength) {
currentPage++;
pageMove();
if (currentPage > pageLength - 1) {
currentPage = 0;
}
}
pages[currentPage].style.transform =
"translateY(-" + currentPage * 100 + "%)";
}
//MOUSEWHEEL
$(document).on("mousewheel DOMMouseScroll", function(e) {
if (!scrolling) {
if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
navigateUp();
} else {
navigateDown();
}
console.log(currentPage);
}
});