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>

Solution 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>

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

Solution 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.

Comments

[davidtgq]

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...

[Deepak Yadav]

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

[davidtgq]

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?

[davidtgq]

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.

[Deepak Yadav]

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

[Deepak Yadav]

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

[davidtgq]

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!

[Jenuel Ganawed]

how to do this in vue?