slick.jsのドットのサイズや位置を調整する



通常のスライダーを実装します


<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のドットのサイズや位置や間隔を調整する方法でした。

コメント

タイトルとURLをコピーしました