title: Slick.js how to align images in center of carousel?
body: <p>By default, images align on the left. Using the setting <code>centerMode: true</code> the images are aligned a few pixels from the left, and the edge of the next image is peeking from the right side, as shown:</p>
  
  <p><a href="https://i.stack.imgur.com/G5paU.png" rel="noreferrer"><img src="https://i.stack.imgur.com/G5paU.png" alt="enter image description here"></a></p>
  
  <p>These are the settings used:</p>
  
  <pre><code>for (var i in data.image_set) {
      sc.append('&lt;div&gt;&lt;img src="' + data.image_set[i].image + '" height="' + data.image_set[i].height + '" width="' + data.image_set[i].width + '"&gt;&lt;/div&gt;');
  }
  sc.slick({
      dots: true,
      speed: 150,
      centerMode: true
  });
  </code></pre>
  
  <p>I would like to have the slider display only one image at the center, and optionally have the previous and next images partially visible to the left and right sides respectively. How can this be accomplished?</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() {
    $('.sc').slick({
      dots: true,
      speed: 150,
      centerMode: true
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.sc img {
    height: calc(50vh - 100px);
    width: auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css"&gt;
  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css"&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"&gt;&lt;/script&gt;
  &lt;div class="sc"&gt;
    &lt;div&gt;
      &lt;img src="https://lespider-ca.s3.amazonaws.com:443/I152rUr6ZBih.png?Signature=YFF9BB8dlAe7okzBHnRLWgYmFI8%3D&amp;amp;Expires=1452236979&amp;amp;AWSAccessKeyId=AKIAIS4C7GGEGJPLLSMA" height="900" width="674"&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;img src="https://lespider-ca.s3.amazonaws.com:443/HvAQty35hkNv.png?Signature=8HQKRBefUe%2B4f3sKX1vag78dCbQ%3D&amp;amp;Expires=1452236979&amp;amp;AWSAccessKeyId=AKIAIS4C7GGEGJPLLSMA" height="673" width="900"&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;img src="https://lespider-ca.s3.amazonaws.com:443/A6CZ5y6EUmNg.png?Signature=bsArQ0sX8o9mtgIISwtFPW2hzSM%3D&amp;amp;Expires=1452236979&amp;amp;AWSAccessKeyId=AKIAIS4C7GGEGJPLLSMA" height="673" width="900"&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;img src="https://lespider-ca.s3.amazonaws.com:443/EGO36t7pzBWp.png?Signature=txW6IP9KJ8bB0S%2B9QCYQTEy6Q%2BQ%3D&amp;amp;Expires=1452236979&amp;amp;AWSAccessKeyId=AKIAIS4C7GGEGJPLLSMA" height="673" width="900"&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>