Aravinth Aravinth - 7 months ago 253
Javascript Question

change dots size in slick.js

I try to implement the slick.js slider with dots in my website.
slider dots are very small in size.can i change the size of the dots? or it's default one

my css

.slider {
width: 650px;
margin: 0 auto;
}

img {
width: 200px;
height: 200px;
}


my html

<div class="row">
<div class="col-sm-6">
<div class="slider-about">
<div class="slider">
<div>
<img src="resources/image/slide1.jpg">
</div>
<div>
<img src="resources/image/slide2.jpg">
</div>
<div>
<img src="resources/image/slide3.jpg">
</div>
<div>
<img src="resources/image/slide1.jpg">
</div>
<div>
<img src="resources/image/slide2.jpg">
</div>
<div>
<img src="resources/image/slide3.jpg">
</div>
</div>
</div>
</div>
</div>


my js :

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


this is dots appered enter image description here

Answer

The default theme stylesheet slick-theme.css uses "slick" font-family for the icons. Have uploaded the font files folder to your project? Or if you do not want to use the "slick" font-family, you can adjust the following CSS rule on line 178 in the slick-theme.css

    .slick-dots li button:before
    {
        font-family: 'slick';
        font-size: 6px;
        line-height: 20px;
        ...
    }

like this

    .slick-dots li button:before
    {
        font-size: 20px;
        line-height: 20px;
        ...
    }