I have a jsfiddle here - http://jsfiddle.net/ZrHfu/1/

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

I'm trying to create a responsive thumbnail carousel - I've seen plugins to do this but they all need images the same size, I need something with images in different sizes.

It's very basic - list of images floated left, overflow: hidden on container.

I have left/right buttons, when the button is clicked I'm trying to move the ul with the images left/right.

Only the right button is connected.

My problem is it only works once.

If you click the right button, the images move left, click it a second time and nothing happens.

Why does it work only once.

<!DOCTYPE html>
      <meta charset="UTF-8">
      <title>Title of the document</title>
      <meta name="description" content="">
      <meta name="keywords" content="">
      <meta name="robots" content="">

      <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/master.css" />



        <a class="arrow left">&larr;</a>

        <div class="thumbs">


            <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>


        <a class="arrow right">&rarr;</a>

        <script src="js/hel.js"></script>