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?

Dactylography

Slick performs a lot of calculations to tune position of elements so it may be much simpler for you to just add 2 "empty" elements to carousel instead of "fighting" with slick – Glooming

You could also create a different wrapper for the two different slides that way you can keep the second carousel with 4 and make the first carousel with 2 – Sanskritic

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> 

Glauconite

Thank you! Not sure how I missed this... but the CSS works perfectly – Veer

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;
}

Aestheticism