Left align images with fewer images than 'slidesToShow'

Question

In the code below there are two .wrapper divs, 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 slidesToShow is set to 4.

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.

Code html head:

<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

CSS:

.wrapper div {
  padding: 10px;
}
.wrapper img {
  width: 100%;
  height: auto;
}

JS:

$(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
        }
      },
    ]
  });
});

HTML body:

<div class="wrapper">
  <div>
    <img src="http://via.placeholder.com/200x200" width="200" height="200" alt="" />
    <p>title</p>
  </div>
  <div>
    <img src="http://via.placeholder.com/200x200" width="200" height="200" alt="" />
    <p>title</p>
  </div>
</div> 
<div class="wrapper">
  <div>
    <img src="http://via.placeholder.com/200x200" width="200" height="200" alt="" />
    <p>title</p>
  </div>
  <div>
    <img src="http://via.placeholder.com/200x200" width="200" height="200" alt="" />
    <p>title</p>
  </div>
  <div>
    <img src="http://via.placeholder.com/200x200" width="200" height="200" alt="" />
    <p>title</p>
  </div>
  <div>
    <img src="http://via.placeholder.com/200x200" width="200" height="200" alt="" />
    <p>title</p>
  </div>
</div> 

<script type="text/javascript" src="slick/slick.min.js"></script>

I tried the following, which works, but I prefer not to change slick.js generated code for maintenance reasons:

.slick-track {
  margin-left: 0;
  margin-right: 0;
}

Is there a more appropriate way to left align the images?

Answer 1

Slick documentation does not have an option to align left yet. So overriding css class is one way to go.

If you only want the first carousel to be left aligned, add following segment to one of custom override css files (any css file loads after slick.css)

.left-align-slick > .slick-list > .slick-track {    
    margin-left:0;
}

Add left-align-slick class to the container div of the carousel you want to be left aligned.

<div class="wrapper left-align-slick">
  <div>
    <img src="http://via.placeholder.com/200x200" width="200" height="200" alt="" />
    <p>title</p>
  </div>
  <div>
    <img src="http://via.placeholder.com/200x200" width="200" height="200" alt="" />
    <p>title</p>
  </div>
</div> 

Answer 2

I faced the same problem. I just fill the space with empty slider containers.

<?php $count = 0; ?>
<?php foreach ($items as $_item): ?>
    ...
<?php endforeach ?>
<?= fillEmptySpace($count, $slideMinItems); ?>

function fillEmptySpace($count, $slideMinItems)
{
    $emptySliderHtml = "<div class='product-item'></div>";
    $output = "";

    if ($count < $slideMinItems) {

        $difference = $slideMinItems - $count;

        for ($i = 0; $i < $difference; $i++) {
            $output .= $emptySliderHtml;
        }
    }

    return $output;
}