I can't set overflow to Slider

I made a image slider but I have a some problem. İf you click the next button, don't hidden the left site to slider.

The codes are here :

http://codepen.io/ardazaman/pen/zBGMJX

Thank you for helping.

HTML:

 <section id="slider">
            <div class="arrow">
                <a href="#"> < </a>
                <a href="#"> > </a>
            </div>

            <div class="slider">
                <ul>
                    <li class="slides"><img src="resimler/resim1.jpg"></li>
                    <li class="slides"><img src="resimler/resim2.jpg"></li>
                    <li class="slides"><img src="resimler/resim3.jpg"></li>
                    <li class="slides"><img src="resimler/resim4.jpg"></li>
                </ul>
            </div>   


  </section>

CSS:

section#slider {
  margin-left: 150px;
  border: 3px solid #333;
  width: 1004px;
  height: 575px;
  position: relative;
}

div.slider {
  overflow: hidden;
  width: 960px;
}

div.slider ul {
  list-style-type: none;
  overflow: hidden;
}

div.slider ul li {
  width: 960px;
  float: left;
}

div.slider ul li img {
  width: 960px;
}

div.arrow {
  font-size: 50px;
  position: absolute;
  top: 40%;
}

div.arrow a {
  text-decoration: none;
  background-color: #333;
  color: #999;
  display: inline-block;
  width: 35px;
  height: 70px;
  line-height: 70px;
}

div.arrow a:nth-child(1) {
  margin-left: 20px;
  padding-left: 3px;
}

div.arrow a:nth-child(2) {
  margin-left: 870px;
  padding-left: 3px;
}

JQUERY CODES:

$(document).ready(function() {
  var liWidth = $('div.slider ul li').width();
  var toplamLi = $('div.slider ul li').length;
  var toplamWidth = liWidth * toplamLi;
  var liDeger = 0;

  $('div.slider ul').css({
    width: toplamWidth + "px"
  });

  $('div.arrow a:nth-child(2)').click(function() {
    if (liDeger < toplamLi - 1) {
      liDeger++;
      toplamWidth = liDeger * liWidth;
      $('div.slider ul').animate({
        marginLeft: '-' + toplamWidth + "px"
      }, 500);
    }
    retu false;
  });

  $('div.arrow a:nth-child(1)').click(function() {
    if (liDeger > 0) {
      liDeger--;
      toplamWidth = liDeger * liWidth;
      $('div.slider ul').animate({
        marginLeft: '-' + toplamWidth + "px"
      }, 500);
    }
    retu false;
  });

});