center slick carousel elements when variableWidth is set to true

Question

I'm using slick to slide elements of variable width. I'd like to center the slider when all element are visible.

<div class="slider center-elements">
    <div><h3>item 1</h3></div>
</div>

<div class="slider center-elements">
    <div><h3>element 1</h3></div>
    <div><h3>elem 2</h3></div>
</div>

<div class="slider center-elements">
    <div><h3>ab</h3></div>
    <div><h3>abc</h3></div>
    <div><h3>abcd</h3></div>
    <div><h3>foo</h3></div>
    <div><h3>bar</h3></div>
    <div><h3>xyz</h3></div>
    <div><h3>abcxyz</h3></div>
    <div><h3>8</h3></div>
</div>

I tried using margin:auto for the class .slick-track, but it didn't work.

.slick-track {
    margin: auto;
}

https://jsfiddle.net/tLphab74/6/

Anyway to align elements in center for this particular case?

Answer 1

You can do it using Javascript, like:

let sliders = document.getElementsByClassName("slider");
for (let slider of sliders) {
  let children = slider.querySelectorAll(".slick-slide");
  let ch = children[children.length - 1];
  let boundingRect = ch.getBoundingClientRect();
  let diff =
    slider.getBoundingClientRect().width -
    (boundingRect.x + boundingRect.width);
  slider.style.paddingLeft = `${diff / 2}px`;
}

Updated Fiddle: https://jsfiddle.net/nmhsaxup/

And a snippet:

$(document).ready(function () {
  $(".responsive").slick({
    dots: true,
    infinite: false,
    speed: 300,
    variableWidth: true,
    slidesToShow: 4,
    slidesToScroll: 4,
    responsive: [
      {
        breakpoint: 1024,
        settings: {
          slidesToShow: 3,
          slidesToScroll: 3,
          infinite: false,
          dots: false,
          arrows: false,
        },
      },
      {
        breakpoint: 600,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 2,
        },
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1,
        },
      },
    ],
  });
  let sliders = document.getElementsByClassName("slider");
  for (let slider of sliders) {
    let children = slider.querySelectorAll(".slick-slide");
    let ch = children[children.length - 1];
    let boundingRect = ch.getBoundingClientRect();
    let diff =
      slider.getBoundingClientRect().width -
      (boundingRect.x + boundingRect.width);
    slider.style.paddingLeft = `${diff / 2}px`;
  }
});

.slider.responsive {
  background-color: red;
}

h3 {
  border: 5px solid #000;
  background: #FFF;
  margin: 5px;
  text-align: center;
  line-height: 100px;
  padding: 10px
}

.slider.responsive {
  background-color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css">
<div class="slider responsive">
  <div>
    <h3>item 1</h3>
  </div>
</div>

<div class="slider responsive">
  <div>
    <h3>element 1</h3>
  </div>
  <div>
    <h3>elem 2</h3>
  </div>
</div>

<div class="slider responsive">
  <div>
    <h3>ab</h3>
  </div>
  <div>
    <h3>abc</h3>
  </div>
  <div>
    <h3>abcd</h3>
  </div>
  <div>
    <h3>foo</h3>
  </div>
  <div>
    <h3>bar</h3>
  </div>
  <div>
    <h3>xyz</h3>
  </div>
  <div>
    <h3>abcxyz</h3>
  </div>
  <div>
    <h3>8</h3>
  </div>
</div>