Imageslider jQuery

Question

Hi everyone (this is my first thread here)

I'm making an "imageslider" (but with div:s) with jquery. The question is, How do i hide my scrolling elements outside of the div with the border?

(I'm new here so i cant do post with links so i deleted them) The code:

<script type="text/javascript">

  var pos = 1; 

  $(document).ready(function(){
  console.log("possition: " + pos);

  var slides = $('#container .element');
  var numberOfSlides = slides.length;
  console.log("antal slides: " + numberOfSlides);

  $('#right').click(function(){

   if(pos<=numberOfSlides-1){
      //$('#container div.element').animate({"left" : '+=200px' }, 1000, function() {pos++;});
      $('#container div.element').animate({"left" : '+=200px' }, 1000 );
    pos++;
    console.log("possition: " + pos);
    }

    else{   
    $('#container div.element').animate({"left" : '-=400px' }, 1000);
    pos=1;
    console.log("possition: " + pos);
    }        
  });

  $('#left').click(function(){
   if(pos>1){
       $('#container div.element').animate({"left" : '-=200px' }, 1000);
     pos--;
     console.log("possition: " + pos);  
   }

   else {
    $('#container div.element').animate({"left" : '+=400px' }, 1000);
    pos=3;
    console.log("possition: " + pos);
   }
  });

   }); 
</script>


<div id="container">
    <div id="element1" class="element">3</div>
    <div id="element2" class="element">2</div>
    <div id="element3" class="element">1</div>
</div>

<link id="left" class="slideLink"><</link> 
<link id="right" class="slideLink">></link>

Answer 1

easiest thing would be to use an existing plugin like this:

http://www.gmarwaha.com/jquery/jcarousellite/

Otherwise have you tried adding styling to your container div

#container { overflow:hidden; }