Javascript 设置拇指带右箭头限制的最佳方法？

这是我的带有注释的

sideThumb

函数

this.panos

是拇指的数量，

this.translateX

是拇指移动的像素数量

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
  }
}

最终结果：

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

设置左箭头的限制很容易：如果

此值为
0
，则不要让函数运行。设置右箭头的限制比较困难。使用
-totalThumbsWidth
是不可靠的，因为使用
11
和
14
全景应该会产生相同的结果（使用户可以按向右箭头2次）


解决这个问题的最好办法是什么

编辑：

我做的一些数学题：

 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?

我相信我可以在数学计算中使用它。
我最终设置了如下限制：

  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
  }

const thumbWidth=166//拇指宽度加上填充160+6
常量VisibleTumbSwidth=拇指宽度*5
常量rightArrowClicks=（-this.translateX/thumbWidth）+6
console.log（'TRANSLATE LENGTH'，（-this.translateX/thumbWidth）+6）
log（'PANO LENGTH'，this.panos.LENGTH）
if（direction==“left”&&this.translateX！==0）{
this.translateX+=VisibleTumbSwidth
}
如果（direction==='right'&&rightarrow单击您可以尝试类似的操作，但如果没有小提琴，我无法验证它是否适用于您的特定情况

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
  }
}

slideThumbs（方向）{//向左或向右滑动
常量thumbWidth=160+6//加上填充
const currentTilePosition=（this.translateX/thumbWidth）+5；//获取最后一个可见平铺的当前编号/we+5，因为translateX从0开始
const tilesToGo=（this.panos.length-currentTilePosition）-1；//要使用多少个瓷砖？
var incrementThumbs=thumbWidth*5//每次滑动5个拇指
如果（方向=='right'&&tilesToGo<5）{
如果（tilesToGo==0）{
递增拇指=0；
}否则如果{
incrementThumbs=thumbWidth*tilesToGo；
}
}
如果（方向=='left'&¤tTilesPosition%5！==0）{
incrementThumbs=thumbWidth*（CurrentTilePosition%5）；
}
if（direction==“left”&&this.translateX！==0）{
this.translateX+=递增Thumbs
}
如果（方向=='右'）{
this.translateX-=incrementThumbs
}
}

这样做还可以确保最后一个磁贴始终与屏幕右侧齐平，在磁贴总量不是5的倍数的情况下，我还添加了一些代码，以便于从这种情况下向左移动，希望有帮助
您能提供一个小提琴吗？在填充计算中使用幻灯片数