如何在不给滑动件提供固定宽度的情况下,将滑动件滑块适应图像的大小并将整个滑动件水平居中?
https://jsfiddle.net/5ox31m2a/5525/
$('.slider').slick({
dots: true,
infinite: true,
});
答案 0 :(得分: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 >
现在将图像放置在所需的宽度上,它将正常工作。