如何重新定位光滑中的点？

Question

我正在使用 slick 来创建轮播，目前，点表示要显示的图像位于图像下方。我希望它显示在图像内部，就像它覆盖图像一样。

这是我的代码

<div class="carousel">
    <div><img src="path1"></div>
    <div><img src="path2"></div>
    <div><img src="path3"></div>
</div>

这是我的CSS

.slick-dots{
position: absolute;
bottom: -25px;

display: block;

width: 100%;
padding: 0;
margin: 0;

list-style: none;

text-align: center;
}

这是我的js

<script type="text/javascript">
    $(document).ready(function(){
      $('.carousel').slick({
          dots: true,
          infinite: true,
          speed: 500,
          fade: true,
          cssEase: 'ease',
          autoplay: true,
          arrows: false,
          lazyLoad: 'ondemand',
          cssEase: 'linear',
        });
    }); 
</script>

这是我用来做轮播的链接。

Answer 1

CSS：

.slider {
    width: 650px;
    margin: 0 auto;
}
.slick-dots{
position: absolute;
bottom: 20px;
display: block;
width: 100%;
padding: 10;
margin: 0;
list-style: none;
text-align: center;
}
.slick-dots li.slick-active button:before{
  font-size:15px;
  color:blue;
}

js:

$('.carousel').slick({
    slidesToShow: 3,
    slidesToScroll: 3,
    dots: true,
    infinite: true,
    cssEase: 'linear'
});

请参阅此示例： https ://jsfiddle.net/5ox31m2a/89/