Slick.js how to align images in center of carousel?

Question

By default, images align on the left. Using the setting centerMode: true 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:

These are the settings used:

for (var i in data.image_set) {
    sc.append('<div><img src="' + data.image_set[i].image + '" height="' + data.image_set[i].height + '" width="' + data.image_set[i].width + '"></div>');
}
sc.slick({
    dots: true,
    speed: 150,
    centerMode: true
});

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?

$(document).ready(function() {
  $('.sc').slick({
    dots: true,
    speed: 150,
    centerMode: true
  });
});

.sc img {
  height: calc(50vh - 100px);
  width: auto;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>
<div class="sc">
  <div>
    <img src="https://lespider-ca.s3.amazonaws.com:443/I152rUr6ZBih.png?Signature=YFF9BB8dlAe7okzBHnRLWgYmFI8%3D&amp;Expires=1452236979&amp;AWSAccessKeyId=AKIAIS4C7GGEGJPLLSMA" height="900" width="674">
  </div>
  <div>
    <img src="https://lespider-ca.s3.amazonaws.com:443/HvAQty35hkNv.png?Signature=8HQKRBefUe%2B4f3sKX1vag78dCbQ%3D&amp;Expires=1452236979&amp;AWSAccessKeyId=AKIAIS4C7GGEGJPLLSMA" height="673" width="900">
  </div>
  <div>
    <img src="https://lespider-ca.s3.amazonaws.com:443/A6CZ5y6EUmNg.png?Signature=bsArQ0sX8o9mtgIISwtFPW2hzSM%3D&amp;Expires=1452236979&amp;AWSAccessKeyId=AKIAIS4C7GGEGJPLLSMA" height="673" width="900">
  </div>
  <div>
    <img src="https://lespider-ca.s3.amazonaws.com:443/EGO36t7pzBWp.png?Signature=txW6IP9KJ8bB0S%2B9QCYQTEy6Q%2BQ%3D&amp;Expires=1452236979&amp;AWSAccessKeyId=AKIAIS4C7GGEGJPLLSMA" height="673" width="900">
  </div>
</div>

Homogamy

link to live code or can you share working fiddle ? – Equate

There's a lot of other irrelevant stuff on the same page, I'll try to whip up a minimal version hold on – Homogamy

Done, updated OP, this code produces the same effect, only difference is full page instead of just inside a bootstrap col. There seems to be no difference with or w/o the img height and width – Homogamy

if you add margin:0 auto to your img tag in CSS, it aligns the images in the middle automatically. – Equate

Answer 1

$(document).ready(function() {
  $('.sc').slick({
    dots: true,
    speed: 150,
    centerMode: true
  });
});

.sc img {
  height: calc(50vh - 100px);
  width: auto;
  margin: 0 auto; /* it centers any block level element */
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>
<div class="sc">
  <div>
    <img src="https://lespider-ca.s3.amazonaws.com:443/I152rUr6ZBih.png?Signature=YFF9BB8dlAe7okzBHnRLWgYmFI8%3D&amp;Expires=1452236979&amp;AWSAccessKeyId=AKIAIS4C7GGEGJPLLSMA" height="900" width="674">
  </div>
  <div>
    <img src="https://lespider-ca.s3.amazonaws.com:443/HvAQty35hkNv.png?Signature=8HQKRBefUe%2B4f3sKX1vag78dCbQ%3D&amp;Expires=1452236979&amp;AWSAccessKeyId=AKIAIS4C7GGEGJPLLSMA" height="673" width="900">
  </div>
  <div>
    <img src="https://lespider-ca.s3.amazonaws.com:443/A6CZ5y6EUmNg.png?Signature=bsArQ0sX8o9mtgIISwtFPW2hzSM%3D&amp;Expires=1452236979&amp;AWSAccessKeyId=AKIAIS4C7GGEGJPLLSMA" height="673" width="900">
  </div>
  <div>
    <img src="https://lespider-ca.s3.amazonaws.com:443/EGO36t7pzBWp.png?Signature=txW6IP9KJ8bB0S%2B9QCYQTEy6Q%2BQ%3D&amp;Expires=1452236979&amp;AWSAccessKeyId=AKIAIS4C7GGEGJPLLSMA" height="673" width="900">
  </div>
</div>

Equate

It works! Thank you :) How did you know that, is there any way I could've found out on my own from docs etc.? I mean the slick.js docs doesn't have any css in there, but this seems like a fundamental feature that a lot of people would use... – Homogamy

its basics of CSS! i just tried it on browser, it worked – Equate

Ah I never actually sat down and learned CSS lol, learning as I go :) One last question, in 0 auto, what does the 0 do? edit: sorry I just found it from another question lol, Specifying auto as the second parameter basically tells the browser to automatically determine the left and right margins itself, which it does by setting them equally. It guarantees that the left and right margins will be set to the same size. The first parameter 0 indicates that the top and bottom margins will both be set to 0. – Homogamy

@DavidTan even i learn't nothing, everything's on the go ! :) margin:0 auto - it is equal to : margin:0 auto 0 auto;, it can be read as: margin: top right bottom left and in shorthand: margin: topbottom leftright; – Equate

That makes a lot more sense than the other answer. But just one small detail, I just checked W3S and they say the order is top-right-bottom-left? w3schools.com/css/css_margin.asp edit: Oops I see what you mean in the last part now, got it! Thanks! – Homogamy

how to do this in vue? – Bloodyminded

Answer 2

The issue is coming from the fact that each individual slide is a div that automatically spans the width of the carousel, but the images do not fill the divs completely and, by default, are left-aligning inside their containers. Try adding something like this to your styles:

.sc div { text-align: center; }
.sc img { margin: auto; }

Allantoid

Ah ok, So basically the margin: auto gives the image left and right margins evenly to center it inside that said div, is that correct? – Homogamy

here, margin:auto means, margin: auto auto auto auto; it applies auto value to all sides. – Equate

Answer 3

Had similar issues, when all the imgs didn't have the same height, they didnt align up into the slider: find .slick-track in your "slick.css" and change display to flex and add align-items: center.

Kast