使用Javascript的水平滾動菜單

Question

我創建了一個菜單，它大於頁面的寬度。 我想要最后一個項目時，第一個項目會再次出現，就像一個沒有盡頭的圓圈。

這是菜單的CSS代碼

`.slider
  width: 200%
  height: 65vh
  position: absolute
  top: 50%
  left: 50%
  transform: translate(-50%, -50%)
  display: flex
  align-items: center

  user-select: none

  transition: all 0s

  &:hover
    cursor: grab`

這是js

    var isDown = false;
var startX;
var mousePosition;
var offset = [0,0];

$('.slider').mousedown(function(e) {
  $(this).css('cursor', 'grabbing');
  $('.pointer').css({'width': '55px', 'height': '55px'});
  isDown = true;
  startX = e.clientX;
  offset = [
        this.offsetLeft - e.clientX,
        this.offsetTop - e.clientY
    ];
  // var startX = e.pageX;
  // var math = Math.round(Math.sqrt(Math.pow(startX - event.clientX, 2))) + 'px';
  // $(this).css('transform', 'translate(' + math + 'px, -50%)');
  // console.log(math);
});

$('.slider').mousemove(function(e) {
  // e.preventDefault();
  if (isDown){
    // var tap = $('.slider').offset().left;
    // console.log(e.pageX - tap);

    mousePosition = e.clientX ;
    console.log(mousePosition);
    // $(this).css('transform', 'translate(' + mousePosition + ', -50%)');
    // console.log(e);
    this.style.left = (mousePosition + offset[0]) + 'px';
    startX = mousePosition;
    // this.style.transform = "translate3d(" + 0 + "1110px, " + 0 + "0px, 0)";
    // div.style.left = (mousePosition.x + offset[0]) + 'px';
  }

});

$('.slider').mouseup(function() {
  $(this).css('cursor', 'grab');
  $('.pointer').css({'width': '30px', 'height': '30px'});
  isDown = false;
});

當滑塊移到它的最后一項時，它結束了，但是我希望第一個再次出現。

Answer 1

我可以建議使用現有的庫嗎？

有一個名為Endless.js的庫，它確實滿足您的要求。 演示可以在這里找到。