web-dev-qa-db-ja.com

slick.jsのドットサイズを変更する

私のウェブサイトにドット付きのslick.jsスライダーを実装しようとしています。スライダーのドットのサイズが非常に小さいです。ドットのサイズを変更できますか？またはそれがデフォルトです

私の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'
    });

これはドットが付けられたものです enter image description here

jquerycssslick.js
8
Aravin

デフォルトのテーマスタイルシート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;
        ...
    }
20
Asta