Back to first li when move to last li ( Using Jquery Scroll To Next)

Question

Im creating horizontal webpage and because its dont have any main menu i will using the next and prev button but when i'm using the jQuery its a problems

when it go to last li the script error i need to know how to reach or back to first elemebt when it reach last element

this is my code for now

<ul class="hidden-container">
    <li id="left" class="left">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </li>
    <li id="home" class="left">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </li>
    <li id="right" class="left">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </li>
  </ul>

and the javascript :

    <script> 
$(function(){
  $('html, body').animate({ scrollLeft: $("#home").offset().left });

  var currentElement = $("li#home");

   // completely ignoring boundaries


    $("#prev").click(function() {
     currentElement = currentElement.prev();
     scrollTo(currentElement);
    });
    $("#next").click(function() {
     currentElement = currentElement.next();
     scrollTo(currentElement);
    });
    function scrollTo(element) {
     $(window).scrollLeft(element.position().left);
    } 

});

</script>

The CSS :

    body {
      height: 800px;
      width: 940px;
    }

    #container {
        width: 2700px;
        position: relative;      
    }
    #prev {
      position: fixed;
      z-index: 6;
      top: 0;
      left: 0;  
    }
    #next {
      position: fixed;
      z-index: 7;
      top: 0;
      right: 0;  
    }
    .hidden-container {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 1;
    }
    #home {
      width: 700px;
      visibility: hidden;
    }
    #left {
      width: 700px;
      visibility: hidden;
    }
    #right {
      width: 700px;
      visibility: hidden;
    }

Im using the scrollleft because the home is at center so at first load the windows viewport will force to center or go to #home

thanks

Answer 1

You need to do a check to see if there's another element after the current one. Since there's nothing after the last li, there'd be an error when nothing is returned as .next().

$("#next").click(function() {
    if (currentElement.next().length > 0) {
        currentElement = currentElement.next();
    } else {
        currentElement = $("li#left");
    }
    scrollTo(currentElement);
}

You'll need to do the same for the other button, ensuring that there's a previous element or setting the target to #right.

Answer 2

currentElement may be an empty jQuery collection. You can simply replace it with the first/last of the same collection if it's empty.

$("#prev").click(function() {
 var ce = currentElement.prev();
 if (!ce.length) {
     ce = currentElement.last();
 }
 scrollTo(ce);
});
$("#next").click(function() {
 var ce = currentElement.next();
 if (!ce.length) {
     ce = currentElement.first();
 }
 scrollTo(ce);
});