Question

我使用光滑来创建旋转木马，目前用于指示要显示的图像位于图像下方的点。我希望它显示在图像内部，就像覆盖图像一样。

这是我的代码

<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>

这是我用来做旋转木马的link。

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/

如何在浮油中重新定位点？

1 个答案: