Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 519
Aravin Avatar asked May 07 '16 10:05

Aravin


People also ask

How do you increase the size of slick dots?

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; ... }

How do you use slick slider Codepen?

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.


1 Answers

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;
        ...
    }
like image 87
Asta Avatar answered Sep 16 '22 11:09

Asta