mori mori - 5 months ago 37
Javascript Question

How to reposition the dots in slick?

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

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/