模写した時に、jQueryのスライダープラグイン『slick.js』を使ったので、使い方をまとめておきます。
初めてこのプラグインを利用する人、使い方を忘れてしまった人などは参考になると思います。
１．slickスライダーの実装方法
まずslickスライダーの実装方法を解説します。手順通りにやればだれでも簡単にスライダーが作れちゃいますよ。
①slick.jsをダウンロードする
公式サイトは以下です。
『get it now』からDLしましょう。
DLしたフォルダの中の、
- ajax-loader.gif
- fontフォルダ
- slick-theme.css
- slick.css
- slick.min.js
を自分の構築しているサイトのフォルダに入れます。（slick.min.jsはjsフォルダに、それ以外は、cssフォルダに入れる、といった感じ）
②cssの読み込み
CSSを読み込みましょう。
|
1 2 |
<link rel="stylesheet" href="css/slick.css"> <link rel="stylesheet" href="css/slick-theme.css"> |
③jsの読み込み
</body>の直前でjsの読み込みを行います。
|
1 2 3 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="./js/slick.min.js"></script> <script src="./js/main.js"></script> |
④スライダー用の画像を用意する
スライダーを施した画像をul、liで囲み、ulには、idかclass属性をつけます。名前は何でもOKです。
|
1 2 3 4 5 6 7 |
<ul id="slider"> <li><img src="./img/slider1.png" alt=""></li> <li><img src="./img/slider2.png" alt=""></li> <li><img src="./img/slider3.png" alt=""></li> <li><img src="./img/slider4.png" alt=""></li> <li><img src="./img/slider5.png" alt=""></li> </ul> |
⑤jQueryのコードを書く
自分で作成したjsファイルに以下のコードを書きます。ulに付けた名前を、呼び出すだけ。
|
1 |
$('#slider').slick(); |
たったこれだけで、スライダーが完成しちゃいます。
２．カスタマイズする
ここからは、slickスライダーのカスタマイズをまとめていきます。
jsによるカスタマイズ
jsファイルに書いたコードに、オプションのコードを書き足していくだけで、様々なカスタマイズが可能です。
|
1 2 3 4 5 6 7 8 9 10 |
$('#slider').slick({ infinite: true, //無限スクロール slidesToShow: 3, //1画面に見せる画像の数 slidesToScroll: 3, //一度にスクロールされる画像の数 speed: 300, //スクロールのスピード dots:true, // 画像下のドット導入 arrows:false, // 画像左右の矢印消す autoplay: true, //オートプレイ autoplaySpeed: 2000, //オートプレイの速さ }); |
たくさんありすぎるので、公式サイト見たほうが早いです。
また、レスポンシブの設定は以下の通りです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
$('.sliderPickup').slick({ dots:true, // 画像下のドット導入 arrows:false, // 画像左右の矢印消す slidesToShow: 3, responsive: [ { breakpoint: 567, settings: { arrows: true, slidesToShow: 1 } }, ] }); |
ブレイクポイントの数値は、その以下になった場合のオプションを設定します。
CSSによるカスタマイズ
jsでできないことは、cssを使ってカスタマイズしていきましょう。
ドットの大きさを変更する
スライダーのドットを変更する場合は、『.slick-dots li button:before クラス』を書き換えます。
このクラスの中でfont-size:6pxとなっているので、数字を大きくすれば、ドットは大きくなります。
ですが、6pxより小さくしてもドットは小さくならない。これは、font-family:slick;が原因のようです。これを別のフォントにして、font-sizeを変更すればドットは小さくなります。
|
1 2 3 4 |
.slick-dots li button:before{ font-family: Noto Sans JP; font-size: 19px; } |
font-size:19pxで、もとのドットの大きさより小さくなりました。
スライドした後、1秒後に吹き出しを入れる
HTMLのコード
liタグの中身は以下のような感じにします。
|
1 2 3 4 5 6 7 8 9 10 |
<li> <div class="slick-items"> <img src="./img/medication.jpg" alt=""> <div class="comment-display"> <div class="slick-comment"> 吹き出しコメント </div> </div> </div> </li> |
jsのコード
|
1 2 3 4 5 6 |
$('#slider').on('beforeChange', function(){//スライドが移動する前には $('.slick-current').removeClass('is--active');//is--activeクラスを削除 }); $('#slider').on('afterChange', function(){//スライドが目の前に来たら $('.slick-current').addClass('is--active');//is--activeクラスを追加 }); |
CSSのコード
|
1 2 3 4 5 6 7 8 |
.comment-display { opacity: 0; transition: 1s opacity ease-out; } .is--active .comment-display { opacity: 1; } |
３．【番外編】CDNを使う
CDNを使って、slickスライダーを実装できます。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!--------------------CSS------------------------------------------------------------------------------------------> <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> <!-------------------------------------------------------------------------------------> <!-------------------JS----------------------------------------------------------------> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script> <!-------------------------------------------------------------------------------------> |
以下のサイトからの引用です。
CDNを使うときは、バージョンを合わせないとうまくいかないようで、配置がずれることもありました。DLしたほうが、確実かと思います。
4.WordPressでの実装
WordPressでの実装もまとめておきます。
①DLしたslickフォルダをWordPressのindex.phpがある階層にアップロード
②cssの読み込み
|
1 2 |
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/slick/slick.css" media="screen" /> <link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/slick/slick-theme.css" media="screen" /> |
③jsの読み込み
|
1 2 |
<script src="<?php echo get_template_directory_uri(); ?>/slick/slick.min.js"></script> <script src="<?php echo get_template_directory_uri(); ?>/js/main.js"></script> |
参考動画
今回実装に関しては、以下の動画を参考にました。かなりわかりやすく説明してくれているので、よかったら参考にしてみてください。