title: Left align images with fewer images than 'slidesToShow'
body: <p>In the code below there are two <code>.wrapper</code> <code>divs</code>, creating two carousels with slick.js. In the upper carousel there are two images, in the second carousel four images. In the initialisation of slick <code>slidesToShow</code> is set to 4.</p>
  
  <p>The two images on the first carousel are centered horizontally, but I need them to be left aligned. How to left-align the carousel images? Images should be the same size for both carousels.</p>
  
  <p>Code html head:</p>
  
  <pre><code>&lt;link rel="stylesheet" type="text/css" href="slick/slick.css"/&gt;
  &lt;link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.wrapper div {
    padding: 10px;
  }
  .wrapper img {
    width: 100%;
    height: auto;
  }
  </code></pre>
  
  <p>JS: </p>
  
  <pre><code>$(document).ready(function(){
    $('.wrapper').slick({
      infinite: true,
      slidesToShow: 4,
      slidesToScroll: 4,
      responsive: [
        {
          breakpoint: 1000,
          settings: {
            slidesToShow: 2,
            slidesToScroll: 2
          }
        },
        {
          breakpoint: 650,
          settings: {
            slidesToShow: 1,
            slidesToScroll: 1
          }
        },
      ]
    });
  });
  </code></pre>
  
  <p>HTML body:</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
    &lt;div&gt;
      &lt;img src="http://via.placeholder.com/200x200" width="200" height="200" alt="" /&gt;
      &lt;p&gt;title&lt;/p&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;img src="http://via.placeholder.com/200x200" width="200" height="200" alt="" /&gt;
      &lt;p&gt;title&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt; 
  &lt;div class="wrapper"&gt;
    &lt;div&gt;
      &lt;img src="http://via.placeholder.com/200x200" width="200" height="200" alt="" /&gt;
      &lt;p&gt;title&lt;/p&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;img src="http://via.placeholder.com/200x200" width="200" height="200" alt="" /&gt;
      &lt;p&gt;title&lt;/p&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;img src="http://via.placeholder.com/200x200" width="200" height="200" alt="" /&gt;
      &lt;p&gt;title&lt;/p&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;img src="http://via.placeholder.com/200x200" width="200" height="200" alt="" /&gt;
      &lt;p&gt;title&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt; 
  
  &lt;script type="text/javascript" src="slick/slick.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>I tried the following, which works, but I prefer not to change slick.js generated code for maintenance reasons:</p>
  
  <pre><code>.slick-track {
    margin-left: 0;
    margin-right: 0;
  }
  </code></pre>
  
  <p>Is there a more appropriate way to left align the images?</p>