当記事ではslick.jsのドットのサイズや位置を調整する方法を記します。
通常のslickスライダーはご理解されている前提で進めていきますので、
「slickスライダー初めて」という方はまずこちらからご参考に頂ければと思います。
slick.jsでシンプルなスライダーを実装する方法【たった4ステップです】
通常のスライダーを実装します
<div class="slider">
<div><img src="./img/slider_img01.jpg"></div>
<div><img src="./img/slider_img02.jpg"></div>
<div><img src="./img/slider_img03.jpg"></div>
</div>
<style>
/*--スライダーの位置とサイズ調整--*/
.slider{
width:300px;
margin:0 auto;
}
/*--------画像サイズ調整---------*/
img{
width:100%;
}
/*-----------height調整----------*/
.slick-slide{
height:auto!important;
}
/*-----------矢印表示----------*/
.slick-next{
right:0!important;
}
.slick-prev{
left:0!important;
}
.slick-arrow{
z-index:2!important;
}
/*------------------------------*/
</style>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<script>
$('.slider').slick({
autoplay: true, //自動再生
autoplaySpeed: 2000, //自動再生のスピード
speed: 800, //スライドするスピード
dots: true, //スライドしたのドット
arrows: true, //左右の矢印
infinite: true, //スライドのループ
pauseOnHover: false, //ホバーしたときにスライドを一時停止しない
});
</script>
ドットのサイズを変更する
ドットのサイズは下記のように指定します。
.slick-dots li button:before{
font-size:20px!important;
}デフォルトが6pxみたいなので、上記のように20pxにすると大きくなります。
6px以下にすると初期のサイズより小さくできます。
ドットの間隔を調整する
各ドットの間隔を調整するには下記のように指定します。
.slick-dots li{
width:40px!important;
}デフォルトが20pxみたいなので、上記のように40pxにするとドット間の間隔が大きくなります。20px以下にすると初期間隔より狭くできます。
ドットの縦位置を調整する
ドットの縦位置を調整するには以下のように指定します。
.slick-dots{
bottom: -40px!important;
}デフォルトが-25pxみたいなので、上記のように-40pxにするとドットの縦位置が低くなります。-25px以上にすると縦位置が高くなります。
以上、slick.jsのドットのサイズや位置や間隔を調整する方法でした。
コメント