Гладкий слайдер: центр и подгонка под размер изображения

Question

Как я могу подогнать скользящий слайдер под размер изображения и отцентрировать его по горизонтали, не давая слику фиксированную ширину?

https://jsfiddle.net/5ox31m2a/5525/

$('.slider').slick({
    dots: true,
    infinite: true,
});

Answer 1

$('.slider').slick({
    dots: true,
    infinite: true,
    slidesToShow: 1,
  	slidesToScroll: 1
});

.slider {
    margin: 0 auto;
}
.center{
  display: table;
}
.center img{
  display: table-cell;
  margin: auto;
}
img {
    width: 50%;
    height: auto;
}

.slick-prev:before, 
.slick-next:before {
    color: black;    
}

body {
  padding: 30px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slider">
  <div class="center">
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png" />
  </div>
  <div class="center">
    <img src="http://kenwheeler.github.io/slick/img/fonz2.png" />
  </div>
  <div class="center">
    <img src="http://kenwheeler.github.io/slick/img/fonz3.png" />
  </div>
  <div class="center">
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png" />
  </div >
  <div class="center">
    <img src="http://kenwheeler.github.io/slick/img/fonz2.png" />
  </div>
  <div class="center">
    <img src="http://kenwheeler.github.io/slick/img/fonz3.png" />
  </div>
</div >

Теперь поместите изображение на желаемую ширину, и оно будет отлично работать.

https://jsfiddle.net/5ox31m2a/6032/