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

im creating horizontal webpage , because dont have main menu using next , prev button when i'm using jquery problems

when go last li script error need know how reach or first elemebt when reach last element

this code now

<ul class="hidden-container">     <li id="left" class="left">       lorem ipsum dolor sit amet, consectetur adipisicing elit, sed 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 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 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 javascript :

    <script>  $(function(){   $('html, body').animate({ scrollleft: $("#home").offset().left });    var currentelement = $("li#home");     // 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 scrollleft because home @ center @ first load windows viewport force center or go #home

thanks

currentelement may empty jquery collection. can replace first/last of 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); });