Wie positioniert man die Punkte in Slick?

Question

Ich verwende Slick, um ein Karussell zu erstellen, derzeit die Punkte, um anzuzeigen, welches Bild angezeigt wird, ist unter dem Bild. Ich möchte, dass es im Bild angezeigt wird, als würde es das Bild überlagern.

ist hier mein Code

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

mein css Hier

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

display: block; 

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

list-style: none; 

text-align: center; 
} 

Hier ist meine 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> 

Hier ist die link ich dafür das Karussell eingesetzt.

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' 
}); 

dieses Beispiel Siehe: https://jsfiddle.net/5ox31m2a/89/