Hi all

I have a jsfiddle here - http://jsfiddle.net/m26Ng/3/

Demo here - http://www.ttmt.org.uk/forum/thumbs-2/

I have a responsive thumbnails carousel thats scrolls thumbnails when pressing the arrows.

When the window is resized I would like to reset the thumbnails so the thumbnails return to there starting position.

This works on window resize but after the thumbnails are reset the arrows don't work.

They start to work if you keep pressing them but then they work incorrectly sending the thumbnails
past the position of the last thumbnail.

I have reset the thumbnails here.

Code:
  $(window).resize(function() {
    $(".thumbs ul").animate({'left':'0'});
    currentPosition=0;
  });
Can anyone see why the arrows have stopped working?

How can I can I reset the thumbnails on resize?

Code:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Responsive slider demo</title>
    
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    
    <link rel="stylesheet" href="css/reset.css" />
    
    <style type="text/css">
      *{
        margin:0;
        padding:0;
      }
      body{ 
        background:#eee;
      }
      #thumbWrap{
        max-width:80%;
        background:#fff;
        margin:50px;
        position:relative;
      }
      .thumbs{
        overflow:hidden;
        white-space: nowrap;
        margin:0 60px;
        border: 1px solid #999;
      }
      .thumbs ul{
        position:relative;
        float:left;
      }
      .thumbs ul li{
        display: inline-block;
      }
      
      .arrow{
        font-size:2em;
        display:inline-block;
        padding:5px;
        background:red;
        position:absolute;
      }
      .arrow:hover{
        cursor:pointer;
      }
      .left{
        top:100px;
        left:10px;
      }
      
      .right{
        right:10px;
        top:100px;
      }
    </style>
  </head>
  
  <body>
    
    <div id="thumbWrap">
      
      <a class="arrow left">&larr;</a>
      <div class="thumbs">
        <ul>
          <li><a href="#"><img alt="" src="images/01.jpg" /></a></li>
          <li><a href="#"><img alt="" src="images/02.jpg" /></a></li>
          <li><a href="#"><img alt="" src="images/03.jpg" /></a></li>
          <li><a href="#"><img alt="" src="images/04.jpg" /></a></li>
          <li><a href="#"><img alt="" src="images/05.jpg" /></a></li>
          <li><a href="#"><img alt="" src="images/06.jpg" /></a></li>
          <li><a href="#"><img alt="" src="images/07.jpg" /></a></li>
          <li><a href="#"><img alt="" src="images/08.jpg" /></a></li>
          <li><a href="#"><img alt="" src="images/09.jpg" /></a></li>
          <li><a href="#"><img alt="" src="images/10.jpg" /></a></li>
          <li><a href="#"><img alt="" src="images/11.jpg" /></a></li>
          <li><a href="#"><img alt="" src="images/12.jpg" /></a></li>
          <li><a href="#"><img alt="" src="images/13.jpg" /></a></li>
          <li><a href="#"><img alt="" src="images/14.jpg" /></a></li>
          <li><a href="#"><img alt="" src="images/15.jpg" /></a></li>
        </ul>
      </div>
      <a class="arrow right">&rarr;</a>
    
    </div><!-- #thumbWrap-->
    
    <script>
      $(window).load(function(){
        var $thumbsContainer = $(".thumbs ul"),
            thumbsWidth = $thumbsContainer.width(),
            thumbsWindow = $(".thumbs").width(),
            currentPosition = 0,
            scrollAmount;

        $('.right').click(function(){
          if(currentPosition < thumbsWidth - (thumbsWindow * 2)){
            scrollAmount = thumbsWindow;
          } else {
            scrollAmount = thumbsWidth - (thumbsWindow + currentPosition)
          }
          $thumbsContainer.filter(':not(:animated)').animate({'left': '-=' + scrollAmount }, 1000, function(){
            currentPosition = Math.abs(parseInt($thumbsContainer.css('left')));
          });
        })

        $('.left').click(function(){
          if(currentPosition > 0 && currentPosition > thumbsWindow){
      			scrollAmount = thumbsWindow;
      		} else {
      			scrollAmount = thumbsWidth - (thumbsWidth - currentPosition);
      		}
          $thumbsContainer.filter(':not(:animated)').animate({'left': '+=' + scrollAmount }, 1000, function(){
            currentPosition = Math.abs(parseInt($thumbsContainer.css('left')));
          });
        });
      })
      
      $(window).resize(function() {
        $(".thumbs ul").animate({'left':'0'});
        currentPosition=0;
      });
      
    </script>
  </body>
</html>