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
slick-dots li button:before { font-family: 'slick'; font-size: 6px; line-height: 20px; ... } . slick-dots li button:before { font-size: 20px; line-height: 20px; ... }
You can also link to another Pen here (use the . css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
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;
...
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With