CONTENTS
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の見た目を管理するオプションにあたります。
dots:true→ドット状のナビを表示
arrows:true→前/次にスライドを切り替える矢印
speed: 1000→次のスライドへの以降スピード
fade: true→フェードON
※trueをfalseにするとそのオプションはOFFになります。
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枚表示スライド
こちらは画像が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は見た目がいいので、いろんなところに多用できそうですね。