title: Image Slider with "Responsive Width", "Fixed Height", "Center Aligned" and "Auto Rotate"
body: <p>I need a full width (responsive) slider with fixed height and centered image ( the min width is 960px and people with a wider screens will see the rest of the image (the extra on the left and right)) and it needs to auto-rotate.</p>
  
  <p>Now I got the html/css worked out, but my javascript is rubbish so i have no idea how to let the images slide. I've checked out a lot of Questions here but nothing seems to work. My image dimensions are 2300x350.</p>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>body {
      margin: 0 auto;
  }
  
  #slider_container {
      width:100%;
      height:350px;
      overflow:hidden;
      position: relative;
      z-index: 1;
  }
  
  .image {
      position:relative;
      float:left;
      height: 350px;
      width: 100%;
      overflow: hidden;
  }
  
  .image img {   
      position:absolute;
      left:50%;
      top:50%;
      margin-left:-1150px;
      margin-top:-175px;
  }
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="slider_container"&gt;
      &lt;div class="image"&gt;
          &lt;img src="images/header.jpg" /&gt;
      &lt;/div&gt;
      &lt;div class="image"&gt;
          &lt;img src="images/header2.jpg"/&gt;
      &lt;/div&gt;
      &lt;div class="image"&gt;
          &lt;img src="images/header3.jpg" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>With this code the pictures come out nice in the middle on every screen but
  how do I let it slide and autorotate? I guess the first image just needs to be replaced by the second so a z-index change? or + or - the width of one picture? </p>