jQuery carousel hide next and prev on first and last slide -

i'm new jquery , use jquery carousel. don't want use plugin. want ask how can hide next button, when on first slide , how can hide next butto, when on last slide.

here demo

http://jsfiddle.net/rglsg/24/

here jquery code

$(function(){ var carousel = $('.carousel ul'); var carouselchild = carousel.find('li'); var clickcount = 0; var canclick = true;   itemwidth = carousel.find('li:first').width()+1; //including margin  //set carousel width won't wrap carousel.width(itemwidth*carouselchild.length);  //place child elements original locations. refreshchildposition();  //set event handlers buttons. $('.btnnext').click(function(e){             if($(".carousel").find("li:eq(6)").text()!=14) {         if(canclick) {             canclick = false;             clickcount++;             //animate slider left item width              carousel.stop(false, true).animate({                 left : '-='+itemwidth             },300, function(){                 //find first item , append last item.                 lastitem = carousel.find('li:first');                 lastitem.remove().appendto(carousel);                 lastitem.css('left', ((carouselchild.length-1)*(itemwidth))+(clickcount*itemwidth));                 canclick = true;             });         }     } });  $('.btnprevious').click(function(){     if($(".carousel").find("li:eq(0)").text()!=1) {         if(canclick){             canclick = false;             clickcount--;             //find first item , append last item.             lastitem = carousel.find('li:last');             lastitem.remove().prependto(carousel);              lastitem.css('left', itemwidth*clickcount);                          //animate slider right item width              carousel.finish(true).animate({                 left: '+='+itemwidth             },300, function(){                 canclick = true;             });         }     } });  function refreshchildposition(){     carouselchild.each(function(){         $(this).css('left', itemwidth*carouselchild.index($(this)));     }); } 

});

  <a href="javascript:void(0);" class="btnprevious">previous</a> <a href="javascript:void(0);" class="btnnext">next</a> <div class="carousel">     <ul>         <li>1</li>         <li>2</li>         <li>3</li>         <li>4</li>         <li>5</li>         <li>6</li>         <li>7</li>         <li>8</li>         <li>9</li>         <li>10</li>         <li>11</li>         <li>12</li>         <li>13</li>         <li>14</li>     </ul> </div> 

http://jsfiddle.net/rglsg/67/

$(function(){ var carousel = $('.carousel ul'); var carouselchild = carousel.find('li'); var clickcount = 0; var canclick = true;  itemwidth = carousel.find('li:first').width()+1; //including margin  //set carousel width won't wrap carousel.width(itemwidth*carouselchild.length);  //place child elements original locations. refreshchildposition();  //set event handlers buttons. $('.btnnext').click(function(e){           if($(".carousel").find("li:eq(6)").text()!='14' ) {          $('.btnprevious').show();         if(canclick) {             canclick = false;             clickcount++;             //animate slider left item width              carousel.stop(false, true).animate({                 left : '-='+itemwidth             },300, function(){                 //find first item , append last item.                 lastitem = carousel.find('li:first');                 lastitem.remove().appendto(carousel);                 lastitem.css('left', ((carouselchild.length-1)*(itemwidth))+(clickcount*itemwidth));                 canclick = true;             });             if ($(".carousel").find("li:eq(7)").text()=='14'){               $('.btnnext').hide();               }         }     }  });  $('.btnprevious').click(function(){      if($(".carousel").find("li:eq(0)").text()!=1) {         $('.btnnext').show();         if(canclick){             canclick = false;             clickcount--;             //find first item , append last item.             lastitem = carousel.find('li:last');             lastitem.remove().prependto(carousel);              lastitem.css('left', itemwidth*clickcount);                          //animate slider right item width              carousel.finish(true).animate({                 left: '+='+itemwidth             },300, function(){                 canclick = true;             });             if ($(".carousel").find("li:eq(0)").text()=='1'){               $('.btnprevious').hide();             }         }     }  });  function refreshchildposition(){     carouselchild.each(function(){         $(this).css('left', itemwidth*carouselchild.index($(this)));     }); } 

});