トップページのメイン画像のスライドなどでよく使われるjQueryのプラグインのslickの導入手順メモ。
レスポンシブ対応。
完成イメージ
①slickの導入
※jQuery本体は別途使える状態にしておいてください。
- 公式サイトのDoenload NowをクリックしてDL
- 以下4ファイルを格納し読み込む(slickディレクトリを挟むかはどちらでも可)
css/
┗ slick/
┗ fonts/
┗ slick-theme.css
┗ slick.css
js/
┗ slick/
┗ slick.min.js
<head>
<!-- slick -->
<link rel="stylesheet" href="css/slick/slick.css">
<link rel="stylesheet" href="css/slick/slick-theme.css">
<!-- style (上書きするのでstyle.cssは一番下で読み込む)-->
<link rel="stylesheet" href="css/style.css">
</head>
<!-- jQuery -->
<script src="js/jquery-3.5.1.min.js"></script>
<!-- slick -->
<script src="js/slick/slick.min.js"></script>
<body>
</body>
ソースコード
html
画像を親要素で囲えていればOK(今回はmvSlider部分のこと)
<ul class="mvSlider">
<li class="mvSlider__itm"><img class="mvSlider__img" src="img/photo--1.jpg"></li>
<li class="mvSlider__itm"><img class="mvSlider__img" src="img/photo--3.jpg"></li>
<li class="mvSlider__itm"><img class="mvSlider__img" src="img/photo--4.jpg"></li>
</ul>
jQuery
ミニマム
<script>
$(function ()
{
$(".mvSlider").slick();
});
</script>
オプションあり(ミニマムに追加)
<script>
$(function ()
{
$(".mvSlider").slick({
arrows: false, //左右の矢印ボタン非表示
dots: true, //画像下のドット表示
fade: true, //スライド方法を、フェードインにする (これ書かないとただのスライド)
autoplay: true, //自動スライドオン
autoplaySpeed: 2000, //1枚の画像の表示時間 (2秒後にスライド開始)
speed: 1500, //次のスライドに切り替わるまでの秒数 (短いと必然的にスライド速度が上がる)
});
});
</script>
css
jQueryの記述が完了すると自動的にhtmlとcss構造がアレンジされる。
jQueryで呼び出してるclassがたくさん書かれているのでそのセレクタを上書きしてスタイルを整える。
/* スライド画像どうしをぴったりくっつける */
.slick-slide img {width: 100%;}
/* ドット */
.slick-dots li button:before{
font-size: 1.5rem; /* 大きさ調整 */
opacity: 1; /* 初期は.25で透過されているので戻す(必要であれば) */
color: grey; /* 色 */
}
/* ドット(アクティブなスライドの) */
.slick-dots li.slick-active button:before{
color: red;
}
カスタマイズメモ
よりカスタマイズしたい場合は以下参考です。
東京ホームページ制作 BRISK slickの使い方からカスタマイズまで【スライダープラグイン決定版】
slick.jsでカルーセルスライダーを実装＆カスタマイズしてみるデモページ