Question

如何在不给滑动件提供固定宽度的情况下，将滑动件滑块适应图像的大小并将整个滑动件水平居中？

$('.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/

光滑的滑块：居中并适合图像大小

1 个答案: