Image slider, simpleslider

JavaScript
1

Hi all

I have a demo here - http://www.ttmt.org.uk/slider/

and jsfiddle here - http://jsfiddle.net/SdFkv/

It’s a simple ul list of images and slider below - I’m using this simple slider - http://loopj.com/jquery-simple-slider/

The slider slides the thumbnails. This is responsive, when the window resizes the images and slider are reset to 0.

My problem is calibrating the slider so dragging the slider to the end shows the last and first images.

If you drag the slider to the right end the image go to far and disappear.

The input that is used to create the slider has a ‘data-slider-range’ that represents the start and end of the slider.

I thought I might be able to create a percentage using the slider and images width but I can’t get it to work.


<!DOCTYPE html>
<html>
  <meta charset="UTF-8">
  <title>Title of the document</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>
  <script src="js/simpleslider.js"></script>
  <link rel="stylesheet" href="css/master.css" />
  <link rel="stylesheet" href="css/slider.css" />

  <style type="text/css">

    body{
      background:#ddd;
    }
    #wrap{
      background:#fff;
      max-width:1000px;
      margin:0 auto;
      padding:50px 0 0 0;
      height:1000px;
    }
    section{
      background:red;
      max-width:90%;
      margin:0 auto;
      padding:10px 0;
    }
    #thumbs{
      white-space:nowrap;
      overflow:hidden;
      1padding:10px 5%;
    }
    #thumbs ul{
      position:relative;
      float:left;
    }
    #thumbs ul li{
      display:inline;
    }
    #thumbs ul li a{
      float:left;
      display:block;
      margin:0 10px 0 0;
    }
    #thumbs ul li:last-of-type a{
      margin:0;
    }
    #slider{
      margin:10px 5%;
    }
  </style>

  </head>

<body>

  <div id="wrap">

    <section id="gallery">
      <div id="thumbs">

        <ul>
          <li><a href=""><img src="images/01.jpg" alt=""></a></li>
          <li><a href=""><img src="images/02.jpg" alt=""></a></li>
          <li><a href=""><img src="images/03.jpg" alt=""></a></li>
          <li><a href=""><img src="images/04.jpg" alt=""></a></li>
          <li><a href=""><img src="images/05.jpg" alt=""></a></li>
          <li><a href=""><img src="images/06.jpg" alt=""></a></li>
          <li><a href=""><img src="images/07.jpg" alt=""></a></li>
          <li><a href=""><img src="images/08.jpg" alt=""></a></li>
          <li><a href=""><img src="images/09.jpg" alt=""></a></li>
          <li><a href=""><img src="images/10.jpg" alt=""></a></li>
        </ul>

      </div>
      <div id="slider">
        <input type="text" data-slider="true" data-slider-range="1,2000"/>
      </div>

    </section>
  </div>


  <script>

    $(function(){

      $("#slider").bind("slider:changed", function (event, data) {
        /*
        var drag_pos = data.value;
        var thumbs_width = $('#thumbs ul').width();
        var percent = (drag_pos*100)/thumbs_width;
    		$('#thumbs ul').css('left', '-' + percent + 'px');
    		*/

    		$('#thumbs ul').css('left', '-' + data.value + 'px');
    	});

    })

    $(window).resize(function(){
      $('#thumbs ul, .slider > .dragger').css('left','0');
    })

  </script>
</body>

</html>