更改 slick.js 中的点大小

Question

我尝试在我的网站中实现带点的 slick.js 滑块。 size.can 中的滑块点非常小我要更改点的大小吗？或者它是默认的

我的css

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

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

我的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>

我的 js :

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

这是圆点

Answer 1

默认主题样式表 slick-theme.css 使用 "slick" 字体系列作为图标。已将字体文件文件夹上传到您的项目？或者如果你不想使用 "slick" 字体系列，你可以在 slick-theme.css

中的第 178 行调整以下 CSS 规则

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

更改 slick.js 中的点大小

change dots size in slick.js

css

jquery

slick.js