How to reposition the dots in slick?

Question

I'm using slick to create a carousel, currently the dots to indicate what image to show is below the image. I want it to display inside the image, like it is overlaying the image.

Here is my code

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

Here's my css

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

display: block;

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

list-style: none;

text-align: center;
}

Here's my 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>

Here's the link I used for doing the carousel.

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

See this example: https://jsfiddle.net/5ox31m2a/89/