【jQuery】slickの使い方と実装サンプル

slick（スリック）とは

slickというのは、jQueryの、スライダーを作成するためのプラグインです。
他のプラグインと比べると非常に優秀なので、世界中で利用されています。

優秀なポイントは主にこちらです。

• レスポンシブにも対応
• IE8以上のブラウザであれば完全対応
• カスタマイズの幅も広い

Slickの導入方法

jQueryのダウンロード

SlickはjQueryベースのプラグインなので、jQueryが必要です。
jQueryのサイトより、jQueryをダウンロードします。

ページ右上の「Download jQuery」をクリックするダウンロードできます。

Slickのダウンロード

Slickのサイトから、Slickをダウンロードします。

ページ右上の「get it now」をクリックして、「Download Now」をクリックすると、ダウンロードできます。

ダウンロードしたフォルダの中で、実際に使用するのはslick.min.jsとslick.cssとslick-theme.cssです。

jQueryとSlickの各ファイルをディレクトリの中に配置する

環境に応じて最適な場所に配置します。

SlickのCSSの場所をhead内に記述

index.htmlファイルのhead内に、先程配置したファイルの場所を記述します。

<link rel="stylesheet" type="text/css" href="js/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="js/slick/slick-theme.css"/>

jQueryとSlickのjsの場所をbodyタグの終了直前に記述

head内に記述してもよいですが、正しく動作しない事があるためbodyタグの終了タグ直前が無難です。

<script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="js/slick/slick.min.js"></script> 

これで準備が整いました。

1枚表示のスライド

それでは、いよいよスライダー実装の手順です。

このような出来上がりになります。

htmlファイル

htmlファイルの、スライドを表示させたい場所にHTMLタグを記述します。

<div class="★main_slider★">
<div><img src="http://placeimg.com/950/300/people/grayscale" alt="slide1"></div>
<div><img src="http://placeimg.com/950/300/nature/grayscale" alt="slide2"></div>
<div><img src="http://placeimg.com/950/300/tech/grayscale" alt="slide3"></div>
</div>
 

bodyタグの終了タグ直前にこのように記述します。

<script type="text/javascript">
$(document).ready(function(){
      $('.main_slider').slick({
　　　　　autoplay: true,
        dots:true,
         arrows:true,
          speed: 1000,
          fade: true,
      });
    });
</script>

★マークのついている部分のクラス名は同じ名前にします。

autoplay:trueからfade:trueまではSlickの見た目を管理するオプションにあたります。

cssファイル

style.cssなどに画像の幅を指定したり、必要に応じて矢印の位置を調整するcssを記述します。

.main_slider{
    max-width:950px;
    margin:0 auto;
}
.main_slider img{
    width:100%;
}
/*右の矢印を画像の内側に*/
.slick-next {
    right: 5px!important;
}
/*左の矢印を画像の内側に*/
.slick-prev {
    left: 5px!important;
    z-index:1000;
}
/*下のドットを画像の内側に*/
.slick-dots {
    bottom:0!important;
}

これで完成です。

4枚表示スライド

こちらは画像が４枚表示され、一枚ずつスライドされていくパターンです。
左右に少しだけ枠が表示されるのも特長です。

htmlファイル

htmlファイルの、スライドを表示させたい場所にHTMLタグを記述します。

<div class="★slide_image★">
  
<div><img src="http://placeimg.com/300/250/nature" alt="image1"></div>

  
<div><img src="http://placeimg.com/300/250/people" alt="image2"></div>

  
<div><img src="http://placeimg.com/300/250/animals" alt="image3"></div>

  
<div><img src="http://placeimg.com/300/250/sepia" alt="image4"></div>

  
<div><img src="http://placeimg.com/300/250/architecture" alt="image5"></div>

</div>

bodyタグの終了タグ直前にこのように記述します。

<script type="text/javascript">
$('.slide_image').slick({
  centerMode: true,
  centerPadding: '60px',
  slidesToShow: 3,
  responsive: [
    {
      breakpoint: 768,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 3
      }
    },
    {
      breakpoint: 480,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 1
      }
    }
  ]
});
</script>

★マークのついている部分のクラス名は同じ名前にします。

こちらもドットナビや矢印など見た目を整えるオプションをつけることができます。

CSSファイル

style.cssなどに記述します。

.slide_image{
    max-width:950px;
    margin:0 auto; 
}
.slide_image img{
    max-width:250px;
}

以上で完成です。

Slickは見た目がいいので、いろんなところに多用できそうですね。