slick.jsでシンプルなスライダーを実装する方法【たった4ステップです】

jQuery

社内の案件でスライダーが入ってるものが多くなってきたので、
ここらでまとめておこうと思い実装の仕方を記します。

たった4ステップです。



1.必要なライブラリを読み込む

ファイルをダウンロードして読み込む方法もありますが、ここでは読み込むだけで使える便利なCDNを使用します。
使うライブラリは4つで以下のように記述します。(jQueryも入っています)

<!--------------------スライダー見た目-------------------------------------------------->
<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">
<!-------------------------------------------------------------------------------------> 

<!--------------------jQuery-----------------------------------------------------------> 
<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>
<!------------------------------------------------------------------------------------->  



2.HTMLを記述する

各画像をdivタグで囲みまとめて親タグで囲みます。親タグにはスライダー作成時にスライダーを適用するためのクラスを付けます。ここでは『class=”slider”』としています。
(ここでのCSSは真ん中よせにするためにつけています)

<div class="sec_inner">
	<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>
</div>

画像が3つ縦に並んでいます


3.スライダーを作成する記述

以下のように記述して先ほど書いたHTMLをスライドとして読み込みます。

$('.slider').slick({
    autoplay: true,         //自動再生
    autoplaySpeed: 2000,   //自動再生のスピード
    speed: 800,       //スライドするスピード
    dots: true,      //スライドしたのドット
    arrows: true,          //左右の矢印
    infinite: true,    //スライドのループ
    pauseOnHover: false,   //ホバーしたときにスライドを一時停止しない 
});

スライダーになりました



4.CSSで見た目を調整

現状だと、矢印が出ていないため、またdotが離れている、環境によっては画像がスライドにフィットしていないなどの可能性があるためCSSで調整します。

/*--------画像サイズ調整---------*/
img{
	width:100%;
}

/*-----------height調整----------*/
.slick-slide{
	height:auto!important;
}
/*------------------------------*/


/*-----------矢印表示----------*/
.slick-next{
    right:0!important;
}
.slick-prev{
    left:0!important;
}
.slick-arrow{
    width: initial!important;
    height: initial!important;
    z-index:2!important;
}
.slick-arrow:before{
    font-size: 30px!important;
}
/*------------------------------*/



矢印が出ました。



デフォルトの矢印のサイズを変えたい場合は『.slick-arrow:before』の『font-size』を、位置を調整したい場合は『.slick-next』と『.slick-prev』の『right』と『left』の値を変更してやることで調整できます。


おまけ:デフォルトの矢印を少しカスタマイズしてみる

デフォルトの矢印のサイズと色と位置を変更してみます。

.slick-next{
    right:30px!important;
}
.slick-prev{
    left:30px!important;
}
.slick-arrow:before{
    font-size: 60px!important;
    color:red!important;
}






slick.jsのスライダーは色々カスタマイズできますのでご興味ありましたら、以下もご参考ください。

slick.jsのスライダーで両端をチラ見せする方法
slick.jsのスライダーでドットをカスタマイズする方法
slick.jsのスライダーの矢印をカスタマイズする方法




以上、slick.jsを使用したシンプルなスライダーの実装方法でした。

最後にすべてのコードを載せます

<div class="sec_inner">
	<div class="slider">   
	        <div class="img_01"><img src="./img/slider_img01.jpg"alt=""></div>
	        <div class="img_02"><img src="./img/slider_img02.jpg"alt=""></div>   
	        <div class="img_03"><img src="./img/slider_img03.jpg"alt=""></div>
	</div>
</div>

<style>
  /*--------画像サイズ調整---------*/
  img{
	  width:100%;
  }

  /*-----------height調整----------*/
  .slick-slide{
	  height:auto!important;
  }

  /*-----------矢印表示----------*/
  .slick-next{
    right:0!important;
  }
  .slick-prev{
    left:0!important;
  }
  .slick-arrow{
    width: initial!important;
    height: initial!important;
    z-index:2!important;
  }
  .slick-arrow:before{
    font-size: 30px!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>

コメント

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