Convert this slide to a loop?-CodePudding

I made a div slider with arrows, each div is set to a min-width of 60px.

The code works just fine, except, when I navigate with the arrow either to the left or to the right, it stops at the last item. I want it to loop (as in endlessly). Instead of stopping at the last item.

let rightArrow = document.getElementById('right')
rightArrow.onclick = function() {
  let container = document.getElementById('box')
  sideScroll(container, 'right', 25, 80, 10)
}

let leftArrow = document.getElementById('left')
leftArrow.onclick = function() {
  let container = document.getElementById('box')
  sideScroll(container, 'left', 25, 80, 10)
}

function sideScroll(element, direction, speed, distance, step) {
  // body...
  scrollAmount = 0

  let slideTimer = setInterval(function() {
    // body...
    if (direction == 'left') {
      element.scrollLeft -= step
    } else {
      element.scrollLeft  = step
    }

    scrollAmount  = step

    if (scrollAmount >= distance) {
      window.clearInterval(slideTimer)
    }
  }, speed)
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #efefef;
  width: 100%;
  height: 100vh;
  background-image: radial-gradient(circle, #2196f3, #3f51b5);
  font-family: 'Nirmala UI';
  display: grid;
  place-items: center;
}

div.main {
  position: relative;
  background-color: #fff;
  border-radius: 10px;
}

div.main div.item_div {
  width: 300px;
  overflow: auto;
  display: flex;
}

div.main div.item_div::-webkit-scrollbar {
  display: none;
}

div.main div.item_div div.item {
  min-width: 60px;
  min-height: 60px;
  border-radius: 10px;
  background-color: grey;
  display: grid;
  place-items: center;
  font-size: 40px;
  text-transform: uppercase;
  scroll-behavior: smooth;
  user-select: none;
}

div.main div.item_div div.item:not(:last-child) {
  margin-right: 20px;
}

div.arrow {
  position: absolute;
  width: 40px;
  height: 40px;
  background-color: #f0f0f0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 50%;
  transform: translateY(-50%);
}

div#left {
  left: -60px;
}

div#right {
  right: -60px;
}

div.arrow span {
  font-size: 20px;
  user-select: none;
}

div.arrow:hover {
  cursor: pointer;
}

<div >
  <div  id="box">
    <div >1</div>
    <div >2</div>
    <div >3</div>
    <div >4</div>
    <div >5</div>
    <div >6</div>
    <div >7</div>
    <div >8</div>
    <div >9</div>
    <div >10</div>
  </div>
  <div  id="left"><span>&#10094;</span></div>
  <div  id="right"><span>&#10095;</span></div>
</div>

Can anyone help me out? Please?

CodePudding user response：

You can you scrollLeft to check the position of scrollbar and move the bar to the start or end accordingly.

I have highlighted the changes I made to the code using comments

let rightArrow = document.getElementById('right')
rightArrow.onclick = function() {
  let container = document.getElementById('box')
  //check if the scrollbar is located at the end and reset it to starting position
  if (container.scrollLeft == container.scrollWidth - container.offsetWidth) {
    sideScroll(container, 'left', 10, container.scrollWidth, 20)
  } else {
     sideScroll(container, 'right', 25, 80, 10)
  }
  
}

let leftArrow = document.getElementById('left')
leftArrow.onclick = function() {
  let container = document.getElementById('box')
  //check if the scrollbar is located at the start and reset it to ending position
  if (container.scrollLeft == 0) {
      sideScroll(container, 'right', 10, container.scrollWidth, 20)
  } else {
      sideScroll(container, 'left', 25, 80, 10)
  }
  
}

function sideScroll(element, direction, speed, distance, step) {
  // body...
  scrollAmount = 0
  

  let slideTimer = setInterval(function() {
    // body...
    if (direction == 'left') {
      element.scrollLeft -= step
    } else {
      element.scrollLeft  = step
    }
    
    

    scrollAmount  = step
    
    

    if (scrollAmount >= distance) {
      window.clearInterval(slideTimer)
    }
  }, speed)
  
  
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #efefef;
  width: 100%;
  height: 100vh;
  background-image: radial-gradient(circle, #2196f3, #3f51b5);
  font-family: 'Nirmala UI';
  display: grid;
  place-items: center;
}

div.main {
  position: relative;
  background-color: #fff;
  border-radius: 10px;
}

div.main div.item_div {
  width: 300px;
  overflow: auto;
  display: flex;
}

div.main div.item_div::-webkit-scrollbar {
  display: none;
}

div.main div.item_div div.item {
  min-width: 60px;
  min-height: 60px;
  border-radius: 10px;
  background-color: grey;
  display: grid;
  place-items: center;
  font-size: 40px;
  text-transform: uppercase;
  scroll-behavior: smooth;
  user-select: none;
}

div.main div.item_div div.item:not(:last-child) {
  margin-right: 20px;
}

div.arrow {
  position: absolute;
  width: 40px;
  height: 40px;
  background-color: #f0f0f0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 50%;
  transform: translateY(-50%);
}

div#left {
  left: -60px;
}

div#right {
  right: -60px;
}

div.arrow span {
  font-size: 20px;
  user-select: none;
}

div.arrow:hover {
  cursor: pointer;
}

<div >
  <div  id="box">
    <div >1</div>
    <div >2</div>
    <div >3</div>
    <div >4</div>
    <div >5</div>
    <div >6</div>
    <div >7</div>
    <div >8</div>
    <div >9</div>
    <div >10</div>
  </div>
  <div  id="left"><span>&#10094;</span></div>
  <div  id="right"><span>&#10095;</span></div>
</div>