title: Jquery full width slider with centered image
body: <p>Ive been trying to make one and searched google for hours, but i cannot find what im after.</p>
  
  <p>Basically it is an image slider that slides in from the far right of your screen(regardless of resolution) goes to the middle of the viewport then slides out the far left.</p>
  
  <p>Im not a jquery wizard so i cannot complete this myself, but i have a basic understanding how it could be done.</p>
  
  <p>example: <a href="https://www.tumblr.com/" rel="nofollow">https://www.tumblr.com/</a></p>
  
  <p>Any1 know if there is something out there that works this way?</p>
  
  <p>Thanks</p>
  
  <p><strong>EDIT</strong>
  Im half way there, it doesnt center though</p>
  
  <pre><code>    &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      $(function () {
          $("#scroller .item").css("width", $(document).width());
          $("#scroller").scrollable({
              circular: true,
              speed: 1200
          }).autoscroll({ interval: 4000, autopause: false }).navigator();
          api = $('#scroller').data("scrollable");
          $(window).resize(function () {
              if ($('#scroller .items:animated').length == 0) {
                  $("#scroller .item").css("width", $(document).width());
                  nleft = $(document).width() * (api.getIndex() + 1);
                  $("#scroller .items").css("left", "-" + nleft + "px");
              }
          });
          api.onSeek(function (event) {
              $("#scroller .item").css("width", $(document).width());
              nleft = $(document).width() * (api.getIndex() + 1);
              $("#scroller .items").css("left", "-" + nleft + "px");
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>HTML/ CSS</p>
  
  <pre><code>            &lt;div id="Slider"&gt;
              &lt;div id="area"&gt;
                  &lt;div id="scroller"&gt;
                      &lt;div class="items"&gt;
                          &lt;div class="item"&gt;
                              &lt;a href="Default.aspx" class="image"&gt;&lt;img src="Images/Slider/1_1000x350.png" alt="" width="1140" height="350" title="" /&gt;&lt;/a&gt;
                          &lt;/div&gt;
                          &lt;div class="item"&gt;
                              &lt;a href="Default.aspx" class="image"&gt;&lt;img src="Images/Slider/2_1000x350.png" alt="" width="1140" height="350" title="" /&gt;&lt;/a&gt;
                          &lt;/div&gt;
                          &lt;div class="item"&gt;
                              &lt;a href="Default.aspx" class="image"&gt;&lt;img src="Images/Slider/3_1000x350.png" alt="" width="1140" height="350" title="" /&gt;&lt;/a&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
      &lt;/div&gt;
  
  
  
  
   #Slider
  {
      left:0;
      width:100%;
      height:420px;
      background-color:white;
      position:absolute;
      z-index:1;
  }
  
  #scroller 
  {
      z-index:1;
      position:relative;
      overflow:hidden;
      height: 420px;
      width: 100%;
      margin: 0 0 0 0;
  }
  
  #scroller .items 
  {
      z-index:1;
      position:absolute;
      width:20000em;
  }
  
  #scroller .items .item {
      width: 1140px;
      height: 420px;
      float:left;
  }
  </code></pre>