Vertical Javascript slider, slides more than it should

Question

I am trying to make a vertical image slider, that slides exactly the width of the slider.

I've now tried many many hours to get this to work, something that I think should be rather simple to do but I simply can't figure out what I am doing wrong, and my brain is about to melt down while also thinking I've made it way too complicated at this point.

The slider has a width of 548px and a height of 137px.

The images inside the slider has a width of 548px divided by 2.

Fiddle of the slider

As you can see below, the slider moves slightly more than it should

JavaScript module (Yes move left and move right are different, this is because I have been testing a lot of different approaches.

If I make change the right function to this:

  var horizontalMoveRight = function(wrapper) {
    wrapper.scrollLeft += elemScroll;

    if (elemMoved == elemMove || elemMoved > elemMove) {
      clearInterval(slideInterval);
      elemMoved = 0;
    } else {
      elemMoved++;
    }
  };

It will almost work, but still move slight more after a few clicks.

var horizontalSlider = (function() {

  var slideParent;
  var slideLeftButton;
  var slideRightButton;
  var slideInterval;
  var slideTimer;

  var elemScroll = 0;
  var elemLength = 0;
  var elemMove = 0;
  var elemMoved = 0;
  var lastMove = false;


  var horizontalConstruct = function(parenElement, lButn, rButn, slidTimer, eleScroll) {
    slideParent = parenElement;
    slideLeftButton = document.querySelectorAll(lButn);
    slideRightButton = document.querySelectorAll(rButn);
    slideTimer = slidTimer;
    elemScroll = eleScroll;

    Array.from(slideLeftButton).forEach(elem => elem.addEventListener("click", horizontalClickLeft, false));
    Array.from(slideRightButton).forEach(elem => elem.addEventListener("click", horizontalClickRight, false));
  };

  var horizontalClickLeft = function() {
    clearInterval(slideInterval);
    elemMoved = 0;
    var wrapper = this.parentNode.querySelector(slideParent);

    elemLength = wrapper.clientWidth;
    elemMove = (elemLength - elemScroll) / elemScroll;

    slideInterval = setInterval(function() {
      horizontalMoveLeft(wrapper);
    }, slideTimer);
  };
  var horizontalClickRight = function() {
    clearInterval(slideInterval);
    elemMoved = 0;
    var wrapper = this.parentNode.querySelector(slideParent);

    elemLength = wrapper.clientWidth;
    elemMove = (elemLength - elemScroll) / elemScroll;

    slideInterval = setInterval(function() {
      horizontalMoveRight(wrapper);
    }, slideTimer);
  };

  var horizontalMoveRight = function(wrapper) {
    if (elemMoved == elemMove || elemMoved > elemMove) {
      clearInterval(slideInterval);
      elemMoved = 0;
    } else {
      if (elemMoved + 1 > elemMove) {
        lastMove = Number(((elemMove - elemMoved) * 10));
      }

      if (lastMove === false) {
        wrapper.scrollLeft += elemScroll;
      } else {
        wrapper.scrollLeft += lastMove;
        lastMove = false;
      }

      elemMoved++;
    }
  };

  var horizontalMoveLeft = function(wrapper) {
    wrapper.scrollLeft += -elemScroll;

    if (elemMoved == elemMove || elemMoved > elemMove) {
      clearInterval(slideInterval);
      elemMoved = 0;
    } else {
      elemMoved++;
    }
  };


  return {
    horizontalConstruct: horizontalConstruct,
    horizontalClickLeft: horizontalClickLeft,
    horizontalClickRight: horizontalClickRight

  };
})();

horizontalSlider.horizontalConstruct(".slideInner", ".slideLeftHorizontal", ".slideRightHorizontal", 7, 10);

.slideInner {
  position: relative;
  width: 548px;
  height: 137px;
  overflow: hidden;
  display: flex;
}

.slideInner a,
.slideInner a img {
  width: calc(548px / 2);
}

.slideRightHorizontal,
.slideLeftHorizontal {
  position: absolute;
  min-width: 45px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.5);
}

.slideLeftHorizontal {
  left: 0;
  color: #fff;
}

.slideRightHorizontal {
  right: 0;
  color: #fff;
}

.overflowh {
  overflow: hidden;
}

.slideT1M {
  margin: 20px 0px;
  border: 1px solid #000;
  display: flex;
  width: 548px;
  position: relative;
}

Vertical Javascript slider, slides more than it should

Answers (1)

Related Questions