Горизонтальное меню прокрутки с помощью 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 , и она делает именно то, что вы просили.Демоверсию можно найти здесь .