Best way to set the limit of the right arrow of the thumb strip?

Question

This is my sideThumbcomment feature . this.panos- the number of thumbs, and this.translateX- the number of pixels that are moved by the thumbs.

slideThumbs (direction) { // slide to left or right
  const thumbWidth = 160 + 6 // plus padding
  const visibleThumbsWidth = thumbWidth * 5 // slide 5 thumbs at a time

  // exclude last thumb
  const totalThumbsWidth = thumbWidth * (this.panos.length - 1)
  if (direction === 'left' && this.translateX !== 0) {
    this.translateX += visibleThumbsWidth
  }
  if (direction === 'right' && this.translateX !== -totalThumbsWidth) {
    this.translateX -= visibleThumbsWidth
  }
}

Final result:

transform: translate(-830px, 0px); // clicking the right arrow one time
transform: translate(-1660px, 0px); // and two times

Setting the left arrow limit is simple: do not leave the function, if this.translateXany 0. It is harder to set the limit of the right arrow. The use is -totalThumbsWidthnot reliable, since the presence 11and 14panos should lead to the same result (allow the user to press the right arrow 2 times).

What is the best way to solve this problem?

EDIT:

Some math I did:

 6 thumbs => can click right arrow 1 time
 11 thumbs => can click right arrow 2 times
 16 thumbs => can click right arrow 3 times

 5 * x + 1 = 16 // this is how I get x in the third example
 x = (this.panos.length - 1) / 5 // what to do with this?

I am sure I can use this in mathematical calculation.

Answer 1

- , ,

slideThumbs (direction) { // slide to left or right
  const thumbWidth = 160 + 6 // plus padding
  const currentTilePosition = (this.translateX / thumbWidth) + 5; // get the current number for the last visible tile / we +5 because translateX starts at 0
  const tilesToGo = (this.panos.length - currentTilePosition) - 1; // how many tiles to go?

  var incrementThumbs = thumbWidth * 5 // slide 5 thumbs at a time

  if (direction === 'right' && tilesToGo < 5) {
      if (tilesToGo === 0) {
       incrementThumbs = 0;
      } else if {
       incrementThumbs = thumbWidth * tilesToGo; 
      }
  }

  if (direction === 'left' && currentTilesPosition % 5 !== 0) {
     incrementThumbs = thumbWidth * (currentTilesPosition % 5);
  }

  if (direction === 'left' && this.translateX !== 0) {
    this.translateX += incrementThumbs
  }
  if (direction === 'right') {
    this.translateX -= incrementThumbs
  }
}

, , 5, , , ,

Answer 2

, :

  const thumbWidth = 166 // thumb width plus padding 160 + 6
  const visibleThumbsWidth = thumbWidth * 5

  const rightArrowClicks = (-this.translateX / thumbWidth) + 6
  console.log('TRANSLATE LENGTH', (-this.translateX / thumbWidth) + 6)
  console.log('PANO LENGTH', this.panos.length)
  if (direction === 'left' && this.translateX !== 0) {
    this.translateX += visibleThumbsWidth
  }
  if (direction === 'right' && rightArrowClicks <= this.panos.length) {
    this.translateX -= visibleThumbsWidth
  }

-this.translateX / thumbWidth - , . 6... , . . , - .