CODEWITHSUNDEEP
javascript
asimdev
asimdev

Reputation: 765

How to terminate infinite scrolling using Javascript

I am currently working on this javascript based slider I want the slider to hide the next button when it reaches the final slide and should not slide after that how can I do this

Codepen Link

Upvotes: 0

Views: 72

Answers (2)

ShobiDobi
ShobiDobi

Reputation: 246

fixed it for you sorry

function shiftSlide(dir, action) {
    items.classList.add('shifting');
     items.classList.add('shifting');
    console.log(index)
    if (allowShift) {
      if (!action) { posInitial = items.offsetLeft; }

      if (dir == 1) {
        items.style.left = (posInitial - slideSize) + "px";
        index += dir;      
      } else if (dir == -1) {
        items.style.left = (posInitial + slideSize) + "px";
        index+= dir;      
      }
      if(index == slidesLength -1){
           document.querySelector('#next').style.display = 'none';
          document.querySelector('#prev').style.display = 'block';
      }
    else if(index == 0){
       document.querySelector('#prev').style.display = 'none';
       document.querySelector('#next').style.display = 'block';
    }
      else{
        document.querySelector('#prev').style.display = 'block';
        document.querySelector('#next').style.display = 'block';
      }
    };

    allowShift = false;
  }

Upvotes: 1

ShobiDobi
ShobiDobi

Reputation: 246

You can check when you shift the image if it is the last elm in the list and make the button display none

  function shiftSlide(dir, action) {
    items.classList.add('shifting');
    if(index == document.querySelectorAll('#slides .slide').length){
         document.querySelector('#next').style.display = 'none';
}
    if (allowShift) {
      if (!action) { posInitial = items.offsetLeft; }

      if (dir == 1) {
        items.style.left = (posInitial - slideSize) + "px";
        index++;      
      } else if (dir == -1) {
        items.style.left = (posInitial + slideSize) + "px";
        index--;      
      }
    };

    allowShift = false;
  }

Upvotes: 0

Related Questions