jQuery - Remove Next, Prev Buttons from Slider -

i tried searching this, had trouble finding directly related. new jquery/javascript appreciated! thank you!

i have custom slider functionally working 3 slides in it, , using jquery toggle , forth between slides. each slide 1040px wide. each slide relatively positioned, , floating left.

i hide "button-right" when slider @ beginning (so don't scroll empty area), , hide "button-left" when slider @ end (again, don't scroll empty area).

what logic can use this?

$(function(){ $(".button-right").click(function() {     $(".portfoliosection").animate({left: "-=1040" }, "slow"); }); });  $(function(){ $(".button-left").click(function() {     $(".portfoliosection").animate({left: "+=1040" }, "slow"); }); }); 

here html

<div class="portfolioimg" style="background-image: url(images/featured-flushed.jpg);">     <div class="portfolioimgover">         <div class="button-right">next</div>         <div class="button-left">back</div>         <div class="portfoliosection">             <div class="finley"></div>             <div class="portfoliocontent">                 <h2>flushed</h2><br/><br/>flushed project planned release on mobile platforms.<br /><br />my responsibilities flushed included: establishing visual direction game, creating stylized 3d models, , developing technical game art, including textures, user interfaces , sprite sheets.<br /><br />i worked artist guide , assist creating concept art, story mechanics , level designs.<br /><br /><span style="font-size:10px; color:#aaa;">flushed owned applied studios, llc.</span>             </div>         </div>          <div class="portfoliosection">             <div class="portfoliocontent">                 <h2>whoa! div</h2><br/><br/>here crazy cool stuff bet thought never see.             </div>         </div>          <div class="portfoliosection">             <div class="portfoliocontent">                 <h2>whoa! div</h2><br/><br/>here crazy cool stuff bet thought never see.              </div>         </div>          <div class="clear"></div>      </div> </div> 

here css

<style>.portfolioimg {width:1040px; height:600px; background-color:#efefef; margin-bottom:150px; z-index:1; overflow:hidden;}.portfolioimgover{width:2080px; height:600px; background: rgba(25,25,25,.94);margin-bottom:150px; display:none; z-index:2; left:0px; position:relative;}.portfoliosection{width:1040px; height:600px; position:relative; float:left;}.portfoliocontent{width:300px; color:#dedede; padding:40px; float:left; line-height:22px;}.portfoliocontent a{color:#dedede; border-bottom:dotted 1px #888; padding-bottom:1px; text-decoration:none;}.button-right {width:60px; background:#333; color:#fff; padding:10px; position:absolute; z-index:3; right:1040px; top:300px; cursor:pointer; transition: 0.6s ease 0s; -webkit-transition: 0.6s ease 0s;}.button-right:hover {background:#777; transition: 0.6s ease 0s; -webkit-transition: 0.6s ease 0s;}.button-left {width:60px; background:#333; color:#fff; padding:10px; position:absolute; z-index:3; left:0px; top:300px; cursor:pointer; transition: 0.6s ease 0s; -webkit-transition: 0.6s ease 0s;}.button-left:hover {background:#777; transition: 0.6s ease 0s; -webkit-transition: 0.6s ease 0s;}</style> 

here link page:

http://alanvitek.com/dev

try

jquery(function($){     var sec = $('.portfoliosection'), secwidth = sec.width(), unit = 1040;      $(".button-right").click(function() {         var left = sec.css('left');         left = math.abs(parseint(left.substring(0, left.length - 2)))         if(left + unit >= secwidth){             $(this).hide()         }          sec.animate({left: "-=" + unit }, "slow");         $(".button-left").show();     });       $(".button-left").click(function() {         var left = sec.css('left');         if(left == '-' + unit + 'px'){             $(this).hide()         }         sec.animate({left: "+=" + unit }, "slow");         $(".button-right").show();     }); }) 

demo: fiddle