title: How to center slide-images with javascript?
body: <p>I want to write my own jQuery slider, which shows a small part of the next and previous image (for example <code>20px</code>). </p>
  
  <p>To achieve this, I have created a simple image slider, using <code>float: left;</code> to arrange all the images in one row inside a <code>overflow: hidden</code> div. </p>
  
  <p>All my images got a fixed width of <code>200px</code>. Because of this I calculate the margins of each image with the following sass:</p>
  
  <pre><code>img {
      float: left;
      display: block;
      margin: 0 calc((100vw - 200px) / 4 - 20px);
  
      &amp;:first-child {
        margin-left: calc((100vw - 200px) / 2);
      }
  
      &amp;:last-child {
        margin-right: calc((100vw - 200px) / 2);
      }
  }
  </code></pre>
  
  <p>This works great and positions every image as it should be.</p>
  
  <p>While trying to animate the slider using <code>transform: translateX();</code> I am totally lost calculating the amount of pixels (in vw/%/px) I need to translateX the <code>$('#slider').</code> </p>
  
  <p><em>How can I calculate the <code>translateX</code> value to slide to each image centered?</em></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function(){
    
    document.getElementById('slider').ondragstart = function() { return false; };
    
    var slider = $('#slider'),
        images = slider.find('img'),
        imageCount = images.length,
        currentIndex = 0;
    
    slider.width( imageCount * 100 + "vw");
    
    var slideLeft = function () {
      if ( currentIndex &gt;= imageCount - 1 ) {
        console.log("Last image reached");
        return;
      }
      currentIndex += 1;
      console.log("Slide left");
      
      slider.css("transform", "translateX(" + currentIndex * -10 + "vw)");
    }
    
    var slideRight = function () {
      if ( currentIndex === 0 ) {
        console.log("First image reached");
        return;
      }
      currentIndex -= 1;
      console.log("Slide right");
      slider.css("transform", "translateX(" + currentIndex * -10 + "vw)");
    }
    
    $('#right').on('click', function(){
      slideLeft();
    });
    
    $('#left').on('click', function(){
      slideRight();
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body {
    margin: 0;
    padding: 0;
  }
  
  #slider-container {
    overflow: hidden;
    height: 300px;
    background: rgba(0, 0, 0, 0.05);
    margin: 5vw 0;
    width: 100vw;
  }
  
  #slider {
    height: 300px;
    transition: transform .3s ease-in-out;
    transform: translateX(0);
  }
  #slider img {
    float: left;
    display: block;
    margin: 0 calc((100vw - 200px) / 4 - 20px);
  }
  #slider img:first-child {
    margin-left: calc((100vw - 200px) / 2);
  }
  #slider img:last-child {
    margin-right: calc((100vw - 200px) / 2);
  }
  
  #controls {
    position: relative;
    width: 100vw;
    display: block;
    height: calc(10vw + 100px);
  }
  #controls .arrow {
    display: block;
    width: 100px;
    top: 5vw;
    background: lightgray;
    height: 100px;
    left: 5vw;
    position: absolute;
    font-size: 100px;
    line-height: 80px;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
  }
  #controls .arrow:hover {
    background: lightblue;
  }
  #controls #right {
    left: auto;
    right: 5vw;
  }
  
  p {
    margin: 0 5vw 5vw;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="slider-container"&gt;
    &lt;div id="slider"&gt;
      &lt;img src="https://unsplash.it/200/300?image=1077" alt="img-1"&gt;
      &lt;img src="https://unsplash.it/200/300?image=1076" alt="img-2"&gt;
      &lt;img src="https://unsplash.it/200/300?image=1072" alt="img-3"&gt;
      &lt;img src="https://unsplash.it/200/300?image=1063" alt="img-4"&gt;
      &lt;img src="https://unsplash.it/200/300?image=1061" alt="img-5"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="controls"&gt;
    &lt;div id="left" class="arrow"&gt;‹&lt;/div&gt;
    &lt;div id="right" class="arrow"&gt;›&lt;/div&gt;
  &lt;/div&gt;
  &lt;p&gt;Currently every scroll click scrolls a random amount to the left or right. This needs to be fixed, so that every image is centered after the slide.&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>